Flex布局中的flex属性

1.flex-grow，flex-shrink，flex-basis取值含义

flex-grow：

延申性描述。在满足“延申条件”时，flex容器中的项目会按照设置的flex-grow值的比例来延申，占满容器剩余空间。

取值情况：

• 取负值无效。
• 取0值表示不延申。
• 取小数情况表示不完全延申，W3C不推荐取小数。

flex-shrink：

收缩性描述。在满足“收缩条件”时，flex容器中的项目会按照设置的flex-shrink和flex-basis乘积的比例来收缩，适应容器大小。

取值情况：

• 取负值无效。
• 取0值表示不收缩。
• 取小数情况表示不完全收缩，W3C不推荐取小数。

flex-basis：

项目占主轴空间描述。描述项目占据flex容器主轴的空间为多少，参与“延申条件”和“收缩条件”的计算。

取值情况：

• 取0表示项目在容器中不占位置。
• 取auto表示项目在容器主轴的空间按优先级由with或content决定。（在都赋值情况下的优先级：flex-basis>witdh>盒模型content）

2.flex取值含义

2.1 flex单值语法

取关键字：

• initial：flex默认值，表示只有收缩性。flex-grow: 0, flex-shrink: 1, flex-basis: auto
• auto：表示有收缩性也有延申性。flex-grow: 1, flex-shrink: 1, flex-basis: auto
• none：表示没有收缩性也没有延伸性。flex-grow: 0, flex-shrink: 0, flex-basis: auto

取数值：

• ： 表示设置延申性。flex-grow: <number>, flex-shrink: 1, flex-basis: 0
• 宽度值：例如px，rem，em等，表示设置项目占主轴空间。flex-grow: 0, flex-shrink: 1, flex-basis: 宽度值

2.2 flex双值语法

第二个值取数值：

• ：表示设置收缩性。flex-grow: 第一个值已设置, flex-shrink: <number>, flex-basis: auto
• 宽度值：例如px，rem，em等，表示设置项目占主轴空间。flex-grow: 第一个值已设置, flex-shrink: 1, flex-basis: 宽度值

2.3 flex三值语法

描述flex-grow，flex-shrink，flex-basis。按照各自的规则取值即可。

3.flex延申计算与收缩计算

3.1 延申计算

当各个项目的flex-grow之和大于1时：

1. 根据flex容器中各个项目flex-basis的值计算是否在主轴上有剩余空间，假设有那么进行延申计算
2. 剩余空间按照各个项目的flex-grow的比例分配到各个项目上进行延申

当各个项目的flex-grow之和小于1时：

1. 根据flex容器中各个项目flex-basis的值计算是否在主轴上有剩余空间，假设有那么进行延申计算
2. 要延申的空间是剩余空间乘上flex-grow之和。之后按照各个项目flex-grow的比例分配到各个项目上进行收缩

3.2 收缩计算

当各个项目的flex-shrink之和大于1时：

1. 根据flex容器中各个项目flex-basis的值计算是否超出了主轴空间，假设超出了那么进行收缩计算
2. 要收缩的空间是总空间减去flex容器的主轴空间。之和按照各个项目flex-shrink×flex-basis的比例分配到各个项目上进行收缩

当各个项目的flex-shrink之和小于1时：

1. 根据flex容器中各个项目flex-basis的值计算是否超出了主轴空间，假设超出了那么进行收缩计算
2. 要收缩的空间是总空间减去flex容器的主轴空间再乘上flex-shrink之和。之后按照各个项目flex-shrink×flex-basis的比例分配到各个项目上进行收缩。

参考链接：

掘金博客 https://juejin.cn/post/6904462648520212488#comment

掘金博客 https://juejin.cn/post/6859547132035072007#comment

W3C官网 https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-flex-grow-factor

博客园博客 https://www.cnblogs.com/oxspirt/p/11070739.html