flex布局：弹性布局，Flexible Box的缩写
flex属性：flex-grow、flex-shrink、flex-basis属性的简写（弹性盒模型对象的子元素才起作用）
默认值：flex: 0 1 auto;
-
flex-grow: grow-放大，项目的放大比例。默认是0，如果还有剩余空间，也不放大。所有项目中的flex-grow=1，等分剩余空间。
-
flex-shrink: shrink-缩小，项目的缩小比例。默认是1，如果剩余空间不足，缩小项目。如果是0，项目不缩小。
-
flex-basis: 分配项目剩余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴剩余的空间。默认值是auto，项目原本的大小。如果设定为xxpx，项目将占据固定空间。
flex-basis: 0%、0、auto的区别
0%和0 页面效果是一样的，最终计算值都是0px。项目占据0主轴空间 0宽度
auto 就是项目原本的大小
flex的取值：
- none。flex: none; 相当于flex: 0 0 auto;
- auto。flex: auto; 相当于flex: 1 1 auto;
- 非负数字。例如 flex: 1; 这个数字就是flex-grow值，相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
- 非负的长度或者百分比。例如flex: 100px; 或者 flex: 50%; 这个值就是flex-basis的值，相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 100px(或者是50%);
- 两个非负数字。例如 flex: 2 3; 相当于 flex-grow: 2; flex-shrink: 3; flex-basis: 0%;
- 一个非负数字，一个长度或者百分比。例如：flex: 2 100px; 相当于flex-grow: 2; flex-shrink: 1; flex-basis: 100px;
