align-content :定义多根轴线的对齐方式，如果子元素只有一根轴线，该属性不起作用 默认值 :stretch 适用于 :多行的弹性盒模型容器
属性 描述flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch 轴线占满整个交叉轴
PS: 在上面的例子 flex-wrap 需设为 wrap, 且数量超出一行, 父容器的高度相对于子容器有多余，才能看到效果
子元素的属性order :定义子元素的排列顺序，数值越小，排列越靠前 默认值:0 适用于:flex子项和flex容器中的绝对定位子元素
PS：用整数值来定义排列顺序，数值小的排在前面。元素的值可以为负值
flex-grow :定义子元素的放大比例 默认值 :0 适用于 :flex子项
<ul> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex li {text-align:center;height:100px;} .flex li:nth-child(1){width:200px;background-color:green;} .flex li:nth-child(2){flex-grow:1;width:50px;background-color:yellow;} .flex li:nth-child(3){flex-grow:3;width:50px;background-color:red;}flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3
flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：
a: 50+(300/4)=200px
b: 50+(300/41)=125px
c: 50+(300/43)=275px
flex-shrink :定义子元素的收缩比例（与flex-grow相反） 默认值 :1 适用于 :flex子项
<ul> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;} .flex li{width:200px;} .flex li:nth-child(1){background:#888;} .flex li:nth-child(2){background:#ccc;} .flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3
我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化
通过收缩因子，所以加权综合可得2001+2001+2003=1000px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(2001/1000)200，即约等于40px
b被移除溢出量：(2001/1000)200，即约等于40px
c被移除溢出量：(2003/1000)*200，即约等于120px
最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px
