flex-grow flex-shrink flex-basis
这三个属性的作用是:在 flex 布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的.
flex-grow
The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.
上面是 MDN 的解释,也就是说flex-grow
是设定拉伸因子.当子元素都分配了拉伸因子后,就和剩下的子元素相对的分配了父元素的空间.比如 a1,a2,a3 三个子元素,父元素是 A.
.A {
width: 500px;
display: flex;
}
.a1 {
flex: 0.3;
}
.a2 {
flex: 0.5;
}
.a3 {
flex: 0.2;
}
那么总的拉伸因子就是0.3+0.5+0.2=1
,于是 a1 占了30%
也就是0.3*500=150
单位的父元素剩余空间.
使用的时候只需要计算子元素的所有 flex 的值S
,然后使用需要计算的单个子元素的 flex 值s
占用整个S
的百分比就知道是多少空间了.
flex-grow
的语法如下:
/* <number> values */
flex-grow: 3;
flex-grow: 0.6;
/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
flex-shrink
The flex-shrink CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.
收缩因子,这是设定子元素收缩的倍数.当子元素总宽度大于父元素的宽度的时候,此时我们发现flex-grow
已经不起作用了,无法分配父元素的剩余空间,且子元素都相应的被压缩了.
问题就在于为什么flex-grow
不起作用,而且为什么会被压缩,其实就在于flex-shrink
,这个属性的默认值为 1,因此被相应的压缩了以适应父元素的大小,现在我们有两种选择:
- 子元素换行显示
felx-wrap
(默认不换行,所以被压缩了). - 设定子元素的收缩倍数
felx-shrink
.
.A {
width: 500px;
display: flex;
}
.a1 {
width: 300px;
flex-shrink: 2;
flex-grow: 1;
}
.a2 {
width: 200px;
flex-grow: 1;
}
.a3 {
width: 100px;
flex-grow: 1;
}
/** flex-shrink默认值是1 **/
此时多出了300+200+100-500=100
的空间,于是这就需要子元素根据flex-shrink
的值来分别压缩了,计算方法如下:
X2 = X1 * 2 500 = 300 * X2 + 200 * X1 + 100 * X1 // 结果是 X1 = 0.55555... X2 =
1.11111...
于是我们可以得到a1
被压缩了0.55555*(300+200+100-500)=55.55
,a2
于a3
被压缩了a1
的一半,也就是55.55/2=22.78
.
它的语法如下:
flex-shrink: 2;
flex-shrink: 0.6;
/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
flex-basis
The flex-basis CSS property specifies the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.
说明这是一个指定子元素大小的属性,相当于width
,指定大小后不参与分配父元素的剩余空间,也可以直接使用width
来替代它,不过flex-basis
的优先级比width
的高,因此当两者都设定了值的时候,优先采用flex-basis
的值(值为auto
的时候另外算).
最后给出一种flex
的简写方式:
/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;