Flex布局：flex:1与flex:auto详解（一）

一 flex:1与flex:auto详解：

flex 是 flex-grow、flex-shrink、flex-basis的缩写。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在浏览器主轴空间（main size）上分配剩余空间，等同于width的替代品。flex-basis取值：0% 即 0 宽度 ； auto 对应取主尺寸值；

 

二 flex不同取值对应的情况：

1. flex 取值为 none，则计算值为 0 0 auto；
2. flex 取值为 auto，则计算值为 1 1 auto。
3. flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%。
4. flex 取值为一个长度或百分比，flex-grow 取 1，flex-shrink 取 1,则视为 flex-basis 值。
5. flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%。
6. flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1。

 注意：flex 后两个属性可选，所以：flex：0 auto 与 flex：0 1 auto相同。

 

flex:1与flex:auto详解：https://www.cnblogs.com/wenqiangit/p/11664524.html

flex三个配置项的实际意义：https://blog.csdn.net/qq_41075132/article/details/82865248