flex深入理解

flex

flex-basis:0%表示建议支持是0

flex-basis:auto表示固定尺寸由内容决定，由于元素不具有弹性，因此，元素内的内容不会换行，最终尺寸通常表现为最大内容宽度。

initial 默认值

flex: 0 1 auto

不会增长变大占据flex容器中额外的剩余空间（flex-grow:0），会收缩变小以适合容器（flex-shrink:1），尺寸根据自身宽高属性进行调整（flex-basis:auto）

auto

flex: 1 1 auto

子项会增长变大占据flex容器中额外的剩余空间（flex-grow:1），会收缩变小以适合容器（flex-shrink:1），尺寸根据自身宽高属性进行调整（flex-basis:auto）。

none

flex: 0 0 auto

子项会不会增长变大占据flex容器中额外的剩余空间（flex-grow:0），也不会收缩变小以适合容器（flex-shrink:0），尺寸根据自身宽高属性进行调整（flex-basis:auto）。

flex:0

flex: 0 1 0%

flex:1

flex: 1 1 0%

• flex:initial表示默认的flex状态，无需专门设置，适合小控件元素的分布布局，或者某一项内容动态变化的布局；
• flex:0适用场景较少，适合设置在替换元素的父元素上；
• flex:none适用于不换行的内容固定或者较少的小控件元素上，如按钮。
• flex:1适合等分布局；
• flex:auto适合基于内容动态适配的布局；

宽度计算

最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
复制代码

• 基础尺寸由CSS flex-basis属性以及box-sizing盒模型共同决定；
• 弹性增长指的是flex-grow属性，弹性收缩指的是flex-shrink属性；
• 最大最小尺寸限制指的是min-width/max-width，width等CSS属性，以及min-content最小内容尺寸。

引用

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…