Flex-grow,Flex-shrink,Flex-basis详解

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,因此被相应的压缩了以适应父元素的大小,现在我们有两种选择:

1. 子元素换行显示felx-wrap(默认不换行,所以被压缩了).
2. 设定子元素的收缩倍数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;