描述
适用于：flex子项
CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。
取值
initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。
auto
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
<flex-grow>
增长系数，当容器剩余空间大小flex子项大小之和时，此系数有效，分配flex容器剩余空间。默认值0，也就是不增长大小。
<flex-shrink>
收缩系数，当flex子项大小之和大于flex容器大小，此系统有效，收缩flex子项。默认值1，也就是默认收缩
<flex-basis>
初始大小，flex子项初始大小。默认值auto，如果flex子项有宽度或高度值，那么auto就会按照flex子项大小展示，如果设置为0px（必须有单位），flex子项的初始大小就会失效。
语法
/* 基础 */ flex: auto; // 自动设置尺寸 flex: initial; // 元素会根据自身宽高设置尺寸。 flex: none; // 元素会根据自身宽高来设置尺寸。 // 根据上面的取值定义来看，none和initial的区别就在于收缩系数的变化，none不会收缩，initial等比收缩 flex: 2; // 表示flex-grow /* 一个没有单位的数字表示：flex-grow */ flex: 2; /* 一个带单位的值表示：flex-basis，具体是宽度还是高度值取决于flex-direction方向 */ flex: 10em; flex: 30px; /* 两个值，第一个表示flex-grow，第二个表示flex-basis */ flex: 1 30px; /* 两个没有单位的值: 第一个表示flex-grow，第二个表示flex-shrink */ flex: 2 2; /* 三个值: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Global values */ flex: inherit; flex: initial; flex: unset;