①推荐使用 flex 缩写语法，而不是完整的 3 个属性值，因为单值属性所对应的 flex 计算值根据开发者日常最常用的使用进行了优化；
②flex 属性是 flex-grow，flex-shrink 和 flex-basis 这 3 个 CSS 属性的缩写；
③flex:initial 等同于设置 flex: 0 1 auto，可以理解为 flex 属性的默认值，文字描述：flex 容器有剩余空间时尺寸不会增长（flex-grow:0），flex 容器尺寸不足时尺寸会收缩变小（flex-shrink:1），尺寸自适应于内容（flex-basis:auto）（行为类似 fit-content）；
④总结下就是那些希望元素尺寸收缩，同时元素内容万一较多又能自动换行的场景可以不做任何 flex 属性设置；
⑤flex:0 等同于设置 flex: 0 1 0%，flex:none 等同于设置 flex: 0 0 auto；
⑥flex:0 1 0% 表示 flex-grow 是 0，flex-shrink 是 1，因此元素尺寸会收缩但不会扩展，在加上 flex-basis:0% 表示建议支持是 0，因此，设置 flex:0 的元素的最终尺寸表现为最小内容宽度；
⑦flex:0 0 auto 表示元素尺寸不会收缩也不会扩展，再加上 flex-basis:auto 表示固定尺寸由内容决定，由于元素不具有弹性，因此，元素内的内容不会换行，最终尺寸通常表现为最大内容宽度；
⑧flex:1 等同于设置 flex: 1 1 0%，flex:auto 等同于设置 flex: 1 1 auto；
⑨元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但是 flex:1 在尺寸不足时会优先最小化内容尺寸，flex:auto 在尺寸不足时会优先最大化内容尺寸；
⑩当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候，适合使用 flex:auto；
（参考：www.zhangxinxu.com/wordpress/2…
