1、order
取值：数值
功能：（1）容器中有多个项目，
（2）项目的默认摆放时沿主轴（纵向）方向，即按文档中dom元素的书写顺序进行排列的；
应用：order属性用于更改在主轴方向上排列顺序。
order数值越小，排列越靠前，默认为0，可以为负数。
注意：order它与主轴的方向有关系（默认情况为主轴的方向）
.container{
width:100px;height:100px;
flex-flow:column wrap;
}
.item1{
order:-1;
}
.item2{
order:1;
}
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
</div>现象：1排列在2的前边。
2、flex-grow
取值：数值
功能：放大因子
默认值为0，表示不去放大。
a、使用前提：主轴方向上有多余的空间可以让项目去“伸展”
b、计算步骤
（1）统计多余的空间：M=容器的宽度-所有项目的宽度
（2）确定均分的份数：N=项目flex-grow的值之和
（3）计算单位空间：P=M/N
（4）项目放大后的宽度：R=宽度+P*当前flex-flow值
使用方法：如上述代码示例中，若设置第一个item1——flex-grop：0，第二个item2——flex-grop：1
结果：第一个为默认的大小，第二个若容器项目有多余的空间，即会放大在item2上边。
结论：
如果一个项目flex-grow：0，则它的宽度不会放大
项目flex-grow越大，说明它在放大后，会得到更多的空间
项目flex-grow越小，说明它在放大后，会得到更少的空间
特别的：如果所有的项目有一样的flex-grow，它们会等分多余的空间，
也就是说，放大后大小=自身的大小+等值分配的大小
3、flex-shrink
取值：数值
功能：缩小因子
使用前提：主轴方向上的空间不够，项目被压缩。
默认值为1（当项目主轴方向不能容下全部项目，并且不允许换行。
由于flex-shrink为1，所有项目都会被压缩。）
各自被压缩的数值是不一样的，如下公式：
（1）总差值，即需要被压缩的大小：M=容器的宽度-项目的宽度之和
（2）加权和：N=flex-shrink *项目宽度值之和
（3）缩小后的宽度=项目值- 项目值* flex-shrink /N * N
结论：
（1）项目默认会被缩小（空间不够） flex-shrink：1
（2）Flex-shrink越大，被压缩的越多；
（3）Flex-shrink越小，被压缩的越小。特别的，当flex-shrink:0时，不会被压缩。
4、flex-basis
表示在主轴上占据的大小。
默认值为auto（主轴时水平方向时为宽度width，垂直方向时为高度height
（对于值而言，既可以是像素px，也可以是百分比，相对于容器container大小而言。）
5、flex弹性的
（1）该属性时flex-grow、flex-shrink、flex-basis的缩写
（2）默认值为：0 1 auto （后两个属性为可选）
（3）该属性有两个快捷键：auto（1 1 auto）、 none（0 0 auto）
6、align-self
取值：auto、flex-start、flex-end、center、baseline、stratch
功能：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-item属性。
Flex布局的总结：
Flex为display的一个属性值，
它约定了一套设置项目的大小、排列、排序的规则。
