前端 flex: 1； 到底是什么意思？

flex: 1; 到底是什么意思？

首先 flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。建议优先写 flex 属性，而不是写三个分离的属性，因为浏览器会自动计算其相关值。

• flex-grow 默认为0， 只能是正整数。即父元素有剩余空间也不放大元素。如果为 1，则把剩余空间的一份加给自己的宽度。
• flex-shrink 默认为1，只能是正整数。即父元素空间不足则按比例收缩。如果为 0，则不收缩
• flex-basis 默认为 auto, 即元素本身的大小。这个属性定义了在分配多余空间之前，元素占据的主轴空间，浏览器根据这个属性计算是否有多余空间。可以设置为和 width 和 height 属性一样的值，比如 220px，则元素占据固定空间。

以上大部分是我初次学习 flex 布局记下的笔记内容。

查阅笔记得知，flex 取值有两种情况。一是非负数字，二是长度或者百分比。 当 flex 取非负数字时。比如 1 ，则该数字为 flex-grow 的值，flex-shrink 为 1 ，flex-basis 为 0%，则如下是等同的:

.item {
    flex: 1;
}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
复制代码

注：当 flex-basis 取值为百分比时根据伸缩父容器的主尺寸计算，如果伸缩父容器的主尺寸没有定义（即父容器宽度取决于子元素）则计算结果和 auto 一样。

最终结果

根据以上分析： flex: 1; 的值是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 意思就是： 元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度（flex-direction: colunm; 则为高度）如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。