Flex布局的可伸缩性(Flexibility)
2018-02-05 本文已影响53人
虹猫1992
（一）Flexibility
Flex伸缩布局决定性的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间，也会按照 收缩比率 缩小各项目以避免溢出。
（二）Flex属性
flex属性可用来指定 可伸缩长度 的部件：扩展比率，收缩比率，伸缩基准线。当有一个元素是伸项目时，flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目，则flex属性不生效。
flex 是 flex-grow、flex-shrink、flex-basis的缩写
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
<'flex-grow'>取值为<number>，用来指定项目的扩展比率；若在flex缩写省略了此属性值，则flex-grow的指定值是1；<'flex-shrink'>取值为<number>，用来指定项目的收缩比率；若在flex缩写省略了此属性值，则flex-shrink的指定值是1；<'flex-basis'>取值为<length> | auto，用来定义在分配多余空间之前，项目占据的主轴空间，也就是子元素的基准值，flex-basis规定的范围取决于 box-sizing；若在flex缩写省略了此属性值，则flex-basis的指定值是0%。
flex-basis取值的几种情况：
-
固定的长度值，（比如
350px），则该项目将占据固定长度的空间； -
auto,首先会检索该项目的主尺寸（也就是该项目的width/height的值，是width还是height取决于主轴的方向，下面假设主轴的方向为水平方向），如果该项目的主尺寸不为auto，则该项目的flex-basis（基准值）采用主尺寸的值；如果该项目的主尺寸为auto（也就是width:auto或不设置项目的width属性时），则使用该项目的内容content大小为基准值； -
百分比，根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为
auto一样。
（三）flex 的常见值
-
flex的默认值：由于flex-grow、flex-shrink、flex-basis三个属性值在不设置的情况下默认值分别为0、1、auto，所以flex的默认值为：flex:0 1 auto;
.item {
flex: 0 1 auto;
}
/*这种情况先根据width／height属性决定元素的尺寸。
（如果项目的主尺寸为auto，则会以其内容大小为基准）
当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可收缩至其[最小]值。
默认状态下，伸缩项目不会收缩至比其最小内容尺寸更小。
可以通过设置「min-width」或「min-height」属性来改变这个默认状态。*/
-
flex: 0 auto：由于之前提到过，若在flex的缩写中省略了flex-shrink的值，则该值指定为 1，所以flex:0 auto就相当于flex:0 1 auto（也就是与flex取默认值一样）； -
flex: initial：与flex:0 1 auto相同； -
flex: auto: 若在flex的缩写中省略了flex-grow和flex-shrink的值，则他们的值都指定为 1，所以flex:auto就相当于flex:1 1 auto；
.item {
flex: auto; /*相当于flex:1 1 auto;*/
}
/*根据width／height属性决定元素的尺寸，但是完全可以伸缩，会吸收主轴上剩下的空间*/
-
flex:none：相当于flex: 0 0 auto;
.item {
flex: none; /*相当于flex:0 0 auto;*/
}
/*根据width／height属性决定元素的尺寸，但是完全不可以伸缩*/
- 当
flex取值为某个正数时，则这个正数是flex-grow的取值，由于在flex的缩写中省略了flex-shrink和flex-basis的值，而他们在被省略了时的取值分别为1、0%，所以flex:1就相当于flex:1 1 0%；
.item {
flex: 1; /*相当于flex:1 1 0%;*/
}
/*以父容器的宽度为基数计算，元素完全可伸缩*/
- 当
flex取值为一个长度或百分比，则视为flex-basis值，flex-grow取1，flex-shrink取1（注意0%是一个百分比而不是一个非负数字）；
.item {
flex:120px; /*相当于flex:1 1 120px;*/
}
.item1 {
flex: 0%; /*相当于flex:1 1 0%;*/
}
- 当
flex取值为两个非负数字，则分别视为flex-grow和flex-shrink的值，flex-basis取0%；
.item {
flex:2 1; /*相当于flex:2 1 0%;*/
}
- 当
flex取值为一个非负数字和一个长度或百分比，则分别视为flex-grow和flex-basis的值，flex-shrink取1；
.item {
flex:2 120px; /*相当于flex:2 1 120px;*/
}
（四）举例
html如下：
<div class="box">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
css如下：
.box {
display: flex;
width: 800px;
}
.box > div {
height: 200px;
}
.item-1 {
width: 160px;
flex: 2 1 0%;
background: #2ecc71;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: #3498db;
}
.item-3 {
flex: 1 1 200px;
background: #9b59b6;
}
得到的结果如下：
flexibility.png
- 主轴上父容器总尺寸为
800px - 子元素的总基准值是：
0% + auto + 200px = 300px，其中
- 0% 即 0 * 800px = 0宽度
- auto 对应取主尺寸即 100px
- 故剩余空间为
800px - 300px = 500px - 伸缩放大系数之和为：
2 + 2 + 1 = 5
剩余空间分配如下：
- item-1 和 item-2 各分配 2/5，各得 200px
- item-3 分配 1/5，得 100px
各项目最终宽度为：
- item-1 = 0% + 200px = 200px
- item-2 = auto + 200px = 300px
- item-3 = 200px + 100px = 300px
- 当
item-1基准值取0%的时候，是把该项目视为零尺寸的，故即便声明其尺寸为160px，也并没有什么用，形同虚设 - 而
item-2基准值取auto的时候，根据规则基准值使用值是主尺寸值即100px，故这100px不会纳入剩余空间
（五）总结
-
flex的缺省值并非是单一属性的初始值，在flex属性取值的缩写中，flex-grow、flex-shrink、flex-basis的缺省值分别为1、1、0%，而不是这三属性分别的默认值0、1、auto； - 当项目没有设置固定宽度（对于水平的情况，也就是宽度本身是
auto的）时，flex-basis如果也是auto，那么flex-basis的使用值就是该项目的内容本身撑起来的宽度（对于水平的情况）。
