定义和用法
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
属性值
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量
flex-basis 项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字
flex: auto; 相当于flex: 1 1 auto;
flex: none; 相当于flex: 0 0 auto;
flex: initial; 即该属性默认值flex: 0 1 auto;
flex: inherit;从父元素继承该属性
对于剩余分配空间的理解
1、flex容器
一个元素通过设置display: flex;成为弹性容器,即flexbox容器,其子元素成为容器成员。
2、剩余空间
即弹性容器在flex-direction(默认为row)方向剩余未分配空间,举个例子来说:1
2
3
4<div class="container">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27.container {
display: flex;
flex-direction: row;
width: 600px;
height: 150px;
align-items: center;
background-color: #ddd;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -300px;
overflow: auto;
}
.box {
width: 200px;
height: 120px;
line-height: 120px;
text-align: center;
color: #fff;
}
.box1{
background-color: green;
}
.box2 {
background-color: orange;
}
以上代码中,父容器宽带为600px,两个子元素宽度之和为400px,则剩下的200px为可分配空间。
3、剩余空间分配
将box1添加flex-grow: 1;
1 | .box1{ |
可以看到box1的宽度变成了400px,即原先剩余可分配的200px分到了box1上。
同样在box2添加一个flex-grow: 3;
1 | .box1{ |
此时,剩余的200px被分成了1+3=4份,box1被分配了1份,宽度变为200px+50px=250px;box2被分配了3份,宽度变为200px+150px=350px。
以上都是子元素宽度之和没有超过父元素的宽度,当我们把两个子元素的宽度都设置成400px时候:
1 | .box { |
发现,flex-grow并没有起作用,子元素的宽度都被压缩到了300px。
而在上面有提到flex-shrink属性,来控制元素收缩的量,其默认值为1,当子元素宽度之和超过父元素时,子元素会按比例压缩。
所以在上面,当我们设置两个子元素宽度都是400px时,超出了父元素200px,这200px按照默认的1:1的比例对box1和box2进行了压缩,宽度变成了400px-100px=300px;此时的剩余可分配空间可以看成超出的这200px,即-200px。
同样当我们把box1的flex-shrink设为3,box1和box2按照3:1比例缩放:
当把子元素的flex-shrink属性都设为0,不自行压缩的时候:
1 | .box1{ |
可以看出box1和box2都成了400px,并没有被压缩
附:通常在做同一父元素下,一个div宽度固定,另一个div自适应的时候,可以使用flex布局:
1 | .box1{ |
另外一定要注意flex在各个浏览器的兼容性
1 | display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ |