1、flex属性
1.1 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto.
- flex-grow: 定义项目的放大比例，默认为
0，即如果存在剩余空间，也不放大。 - flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为
auto，即项目的本来大小。
1.2 flex该属性有两个快捷值：
auto(1 1 auto) 和 none (0 0 auto)。- 特别的值：flex：1 （1 1 0%）
1.2.1 当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：
.item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; } 1.2.2当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：
.item {flex: auto;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } 1.2.3 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } 1.2.4 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
.item-1 {flex: 0%;} .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } .item-2 {flex: 24px;} .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px; } 1.2.5 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：
.item {flex: 2 3;} .item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%; } 1.2.6 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：
.item {flex: 2333 3222px;} .item { flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px; }参考阮一峰老师的博客： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
参考博客：https://www.cnblogs.com/chris-oil/p/5430137.html