flex子容器属性
在flex布局中，父元素设置了flex之后，子容器相关的属性一共有6个，我们最经常使用的就是flex，例如flex:1。
- order: 子容器的排列顺序
- flex-grow: 子容器剩余空间的拉伸比例
- flex-shrink: 子容器超出空间的压缩比例
- flex-basis: 子容器在不伸缩情况下的原始尺寸
- flex: flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写,默认值为0 1 auto，flex:1 就相当于 flex: 1 1 0%,后两个属性是可选的
- align-self: 定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性
1：order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0
.ele {
order: <number>; /* default 0 */
}
/*数值越小，越排前，默认为0*/
如图所示：蓝色div设置order：-1后排在了最前面，红色div设置order：1后排在了左后面。
例：order
2：flex-grow
子元素宽度的和小于、大于父元素的宽度，分别对应了flex-grow和flex-shrink属性生效的情况，也就是说当子元素的宽度的和小于父元素的宽度值时flex-grow生效，反之flex-shrink生效
属性定义子容器的伸缩比例。将剩余空间按照该比例给子容器。
.ele {
flex-grow: <number>; /* default 0 */
}
/默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/
如图所示：父元素宽度为200px，红色、蓝色div宽度设为50px。
上面一组为原始状态，flex-grow默认值为0，都不分配剩余空间，红色、蓝色div宽度都为50px
中间一组中的蓝色div设置flex-grow: 1后，其分配了剩余空间，红色div宽度还是50px，蓝色div分得了剩余的100px宽度，宽度变为了150px
下面一组中的红色div设置flex-grow: 1，蓝色div设置flex-grow: 2，两个div按比例1：2分配了剩余空间，红色div分得的宽度为1001/(1+2) = 33.33px，蓝色div分得1002/(1+2) = 66.67px，原始宽度加上分配剩余空间得到的宽度后，红色、蓝色div的宽度变为了83.33px、116.67px
3：flex-shrink
属性定义了子容器弹性收缩的比例。把各自的空间按比例分配出去。flex-shrink的默认值为1，flex-shrink的值为0时，不缩放。
.ele {
flex-shrink: <number>; /* default 1 */
}
/*默认1（如果空间不足则会缩小，值为0不缩小）*/
如图所示：父元素宽度为200px，红色、蓝色div宽度设为150px(子元素宽度和为300px，大于父元素宽度200px)
上面一组为原始状态，lex-shrink默认为1，红色和蓝色div按1：1的比例让出自己的空度（50px）后，两个div的宽度都为100px
第二组中的蓝色div设置flex-shrink: 0后，其不出让自己的空间，红色div让出空间100px，宽度变为50px
第三组中的红色div设置flex-shrink：1，蓝色div设置flex-shrink: 2，红色和蓝色div按1：2的比例让出自己的宽度，红色div让出100/3=33.33px，蓝色div让出100*2/3=66.67px，原始宽度减去让出宽度后红色、蓝色div的宽度变为了66.67px、33.33px
值得注意的是第四组的情况，红色div没有设置宽度，当其没有被撑满时，蓝色块（flex-shrink为默认）宽度正常，当红色块被撑满大于150px时：如第五组，蓝色块会被压缩，这是由于其flex-shrink默认为1的缘故，所以这种情况未避免蓝色块被压缩，我们应该为其设置flex-shrink为0（小程序如果是引入的组件，不会被压缩... 😨）
4：flex-basis
属性定义了项目占据的主轴空间，规定的是子元素的基准值。浏览器根据这个属性，计算主轴多余空间或不足空间的大小。它的默认值为auto，即项目的本来大小。取值可以为绝对单位或是百分比(可用于栅格效果)。
.ele {
flex-basis: <length> | auto; /* default auto */
}
/*默认为auto，可以设置px值，也可以设置百分比大小*/
项目的原始长度由flex-basis和width属性控制。flex-basis的优先级高于width属性，如果只设置了width属性，flex-basis为auto，则项目的原始长度等于width；而如果同时设置了width和flex-basis，则项目的原始长度等于flex-basis。因此上文中用到width的地方可以使用flex-basis来代替。flex-basis/width影响了元素是flex-grow还是flex-shrink的表现。
5：align-self
属性指定元素自身在副轴上的对齐方式，可以用来覆盖父元素align-items属性的值对自身设置的效果。
.ele {
align-self: auto | flex-start | flex-end | center | baseline | stretch
}
/*自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
如图所示：父元素设置了align-items:stretch，红色div设置了align-self:flex-end,则红色div的表现形式和其他的有所不同了。
6：flex
复合属性，是flex-grow 、 flex-shrink 和 flex-basis 的简写属性，用来指定Flex子项如何分配空间。平时常用到的flex: 1，其实是flex: 1 1 0%的简写属性，即伸缩比例都是1。
.ele {
flex: <number> <number> <number> | auto; /* default 0 1 auto */
}
/*默认值为0 1 auto，*/
flex不同的取值实际的复合属性如下：
none：0 0 auto;
auto：1 1 auto;
2：2 1 0%; （2为flex-grow的值，其他为默认）;
100px: 1 1 100px(100px为flex-basis 值，其他为默认);
1 2: 1 2 0% (1、2分别为flex-grow和flex-shrink 的值，flex-basis取默认值);
1 100px: 1 1 100px (1、100px分别为flex-grow 和flex-basis的值，flex-shrink取默认值1)
0 auto 或 initial：0 1 auto 即初始值;
参数默认情况为：
flex-grow：默认值为0，若省略则被默认为1;
flex-shrink：默认值为1，省略时默认为1;
flex-basis：默认值为auto，省略时默认为0%;
一个例子: flex和width同时赋值时的影响（主要是flex-basis）
主要代码如下：
.flex {
display: flex;
width: 600px;
}
.flex > div {
height: 100px;
}
.red {
width: 200px;
flex: 2 1 0%;
}
.blue {
width: 100px;
flex: 2 1 auto;
}
.yellow {
flex: 1 1 200px;
}
如图所示：三个div的宽度实际分别为： 120px、220px、260px。 flex-basis值为0%时会覆盖width的值200px，所以红色div基准宽度为0；蓝色div的flex-basis值为auto时，会以width的值100px为基准宽度；黄色div的flex-200px，其基准宽度即为200px。再按照flex-grow的比例进行剩余空间（600-100-200=300px）的分配。
