解析flex：1属性

一、flex:1

　　flex：是 flex-grow、flex-shrink、flex-basis的缩写，默认值为0 1 auto。后两个属性可选。

　　如果flex只定义了一个数字值，则 flex-basis 的值为 0%。

　　所以flex:1 代表：flex: 1 1 0%　　

二、语法

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

　　可以使用一个，两个或三个值来指定 flex属性。

　　单值语法：

值必须为以下其中之一:

1、一个无单位数(<number>): 它会被当作flex:<number> 1 0%; <flex-shrink>的值被设置为1，然后<flex-basis> 的值被设置为0%。
2、一个有效的宽度(width)值: 它会被当作 flex-basis 的值。flex: 1 1 <width>。
3、关键字none，auto或initial.

 

　　双值语法：

第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：
1、一个无单位数(<number>)：它会被当作flex-shrink的值。flex:<number1> <number2> 0%
2、一个有效的宽度值: 它会被当作 flex-basis 的值。flex:<number> 1 <width>

 

　　三值语法:　　

1、第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
2、第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
3、第三个值必须为一个有效的宽度值， 并且它会被当作 flex-basis 的值。

　　

　　关键字取值：

　　initial

元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。

　　auto

元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

　　none

元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。