Flex入门基础——项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）

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的一个属性值，

它约定了一套设置项目的大小、排列、排序的规则。