flex
介绍
定义flex元素的伸缩因子以适应flex容器的可用空间，是flex-grow，flex-shrink 和 flex-basis的简写属性。
语法
此属性可以指定最多三个不同值。
单值语法 ：
值为其中之一：
- 一个无单位数(
<number>)，它会被当作flex-grow的值。 - 一个有效的长度(
<length>)值或百分比(<percentage>)或关键字auto，它会被当作flex-basis的值。
双值语法 ：
第一个值为 flex-grow 的值，即必须为一个无单位数。第二个值必须为以下之一：
- 一个无单位数：它会被当作
flex-shrink的值。 - 一个有效的长度值或百分比或关键字
auto，它会被当作flex-basis的值。
三值语法 ：
- 第一个值必须为一个无单位数，它会被当作
flex-grow的值。 - 第二个值必须为一个无单位数，它会被当作
flex-shrink的值。 - 第三个值必须为一个有效的长度值或百分比或关键字
auto， 它会被当作flex-basis的值。
取值
/* 单值，flex-grow */
flex: 2;
/* 单值，flex-basis */
flex: 300px;
flex: 60%;
flex: auto
/* 双值: flex-grow | flex-basis */
flex: 1 300px;
/* 双值: flex-grow | flex-shrink */
flex: 2 2;
/* 三值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
0 1 auto默认值。 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。<flex-grow>定义 flex 项的flex-grow属性。负值无效。省略时默认值为 0。<flex-shrink>定义 flex 元素的flex-shrink属性。负值无效。省略时默认值为 1。<flex-basis>定义 flex 元素的flex-basis属性。若值为 0，则必须加上单位，以免被视作伸缩性。省略时默认值为 auto。
标准化语法
<flex-grow> <flex-shrink> <flex-basis>
1