By Noxxxx from https://interview.noxxxx.com/?post_type=post&p=92 上山打老虎
欢迎分享与聚合，尊重版权，可以联系授权

flex:1

• flex-shrink: 0 指定了 flex 元素的收缩规则
• flex-basis: 指定了 flex 元素在主轴方向上的初始大小
• flex-grow: 1 设置 flex 项 主尺寸 的 flex 增长系数

flex:1 = flex: 1 1 0%;

flex:1在父元素尺寸不足的时候，会优先最小化内容尺寸。

flex:auto = flex: 1 1 auto;

flex:auto在父元素尺寸不足的时候，会优先最大化内容尺寸。

flex:0 = flex: 0 1 0%;

flex:0 :通常表现为内容最小化宽度

flex:none = flex:0 0 auto;

flex:none;表示元素的大小由内容决定，但是flex-grow，flex-shrink都是0，元素没有弹性，通常表现为内容最大化宽度

See the Pen css – flex:1 auto none 0 的区别 by hjoker (@hjoker) on CodePen.