flex 缩写的等值 #

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

简单描述一下：

• 当 flex 属性只有1 个值时，如果是数值（flex: 1），则表示 flex: 1 1 0% ，如果是长度值（flex: 100px），则表示 flex: 1 1 100px 。
• 当 flex 属性只有2个值时，第一个值一定指 flex-grow ，第二个值如果是数值（flex: 1 2），则表示 flex: 1 2 0%，第二个值如果是长度值（flex: 1 100px），则表示 flex: 1 0 100px 。
• 当 flex 属性有3个值时，就是正常的表示（flex: 1 2 50%） 。

#