web基础学习(十三)CSS3弹性盒模型布局
上一节:CSS3之动画过渡实用案例——————下一节:CSS3多列布局
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
一、弹性容器(flex container也就是父级元素)
- 父级元素共有6个属性下面详细对这几个属性分析布局讲解
-
flex-direction
设置
主轴方向
,确定弹性子元素排列方式flex-direction:row | row-reverse | column | column-reverse
-
flex-wrap
设置弹性子元素
超出弹性容器
范围时是否换行
flex-wrap:nowrap | wrap | wrap-reverse
-
flex-flow
复合属性(flex-direction和flex-wrap),设置弹性
子元素排列方式
flex-flow:[ flex-direction ] || [ flex-wrap ]
-
justify-content
设置弹性子元素
主轴
上的对齐方式
justify-content:flex-start | flex-end | center | space-between | space-around
-
align-items
设置弹性子元素
侧轴
上的对齐方式
align-items:flex-start | flex-end | center | baseline | stretch
-
align-content
侧轴
有空白
且有多行
时,设置弹性子元素侧轴
上的对齐方式align-content:flex-start | flex-end | center | space-between | space-around | stretch
二、弹性子元素(flex item)
- 子元素也有6个属性下面是布局详解
-
order
设置弹性子元素的顺序,
数值小
的排在前面
,可以为负值默认值为0
。order:<integer>
-
flex-grow
设置弹性子元素的
扩展比率
,不允许为负值,默认值为0
,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
flex-grow:<number>
-
flex-shrink
>设置弹性子元素的收缩比率
,不允许为负值,默认值为1
,根据弹性盒子元素所设置的扩展因子作为比率来收缩空间
>flex-shrink:<number>
-
flex-basis
设置弹性子元素的
伸缩基准值
(参照值),不允许为负值。默认值为auto
,无特定宽度(高度)flex-basis:<length> | <percentage> | auto
-
flex
复合属性,设置弹性子元素的空间如何分配
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
-
align-self
设置弹性子元素的在
侧轴
上的对齐方式
,与align-item
的相同。 设置某个弹性子元素的独立对齐方式
。align-self:auto | flex-start | flex-end | center | baseline | stretch
- 弹性盒模型重在理解,自己练习后很容易理解里面的含义。
- 拷贝demo测试练习吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FLEX</title>
<style>
.flex-container {
/*开启弹性盒子*/
display: flex;
/*设置主轴水平方向*/
flex-direction: row;
/*设置超出范围允许换行*/
flex-wrap: wrap;
/*复合方式写主轴水平方向和换行*/
flex-flow: row wrap;
/*设置主轴居中对齐*/
justify-content: center;
/*设置子元素侧轴居中对齐*/
align-items: center;
width: 1200px;
height: 640px;
background-color: lightsteelblue;
}
.flex-container .flex-item {
width: 320px;
height: 240px;
margin: 10px;
font-size: 50px;
font-weight: bolder;
line-height: 240px;
color: red;
text-align: center;
background-color: lightsalmon;
}
/*使用order设置每个子元素的顺序*/
.flex-container .one{
order: 1;
/*设置扩展比率2 */
flex-grow:2;
}
.flex-container .two{
order: 3;
/*设置扩展比率1 */
flex-grow:1;
}
.flex-container .three{
order: 4;
/*设置扩展比率3 */
flex-grow:3;
}
.flex-container .four{
order: 2;
}
.flex-container .five{
order: 5;
}
.flex-container .six{
order: 0;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item one">1</div>
<div class="flex-item two">2</div>
<div class="flex-item three">3</div>
<div class="flex-item four">4</div>
<div class="flex-item five">5</div>
<div class="flex-item six">6</div>
</div>
</body>
</html>