css flex理解与学习

包含三个属性

• flex-grow
• flex-shrink
• flex-basis

定义

flex-grow 增长
flex-shrink 收缩
flex-basis 基准，其实属性类似于width（flex-row）height（flex-column），如果两个属性都存在的话优先级为flex-basis

书写形式

关键词值

• flex: auto; 等价于flex: 1 1 auto.
• flex: initial; 等价于flex: 0 1 auto.
• flex: none; 等价于flex: 0 0 auto.

一个值

如果只有一个值的话

• flex: 2;没有单位则这个属性值为flex-grow

• flex: 10em;flex: 30%;flex: min-content;有单位或关键字，则这个属性值为flex-basis

两个值

如果两个值

• flex: 1 30px; 分别为flex-grow | flex-basis

• flex: 2 2;分别为flex-grow |
  flex-shrink

三个值

• flex: 2 2 10%;分别为flex-grow | flex-shrink | flex-basis

初始值

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

也就是flex:0 1 auto

flex-grow的计算

例如，如果在一个 700px 的容器中有四个 100px 的flex-item，且flex-item的flex-grow分别为 0、1、2 和 3，则三个项目的总主尺寸为 400px，这意味着有 300px 的正自由空间可以分配。 总共有 6 个增长因子（3 + 2 + 1），因此每个增长因子等于 50px（（300px / 6））。 每个柔flex都有一定的正向自由空间，等于该空间乘以其柔性增长值–因此分别为 0、50px、100px 和 150px。 因此，弹性项的总大小分别为 100px、150px、200px 和 250px。

建议

建议写成flex:1,1,auto这种形式，单独写的可能效果不好,所以不推荐，但是我也没有尝试过🤣🤣🤣🤣🤣🤣