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…
