7、弹性盒子模型（项目属性）

此类属性全部为项目属性

1、flex-grow:定义项目放大比例 默认为0（即使有剩余空间都不分配）。值为num；无单位

（1）项目没有给定宽度：

默认按照比例分配此时会造成宽度分配不均需要给所有项目加宽度width：0；

（2）项目给定宽度：

会分配剩余空间（宽度小于容器的前提下）
按照flex-grow: num;分配

！！！注意是分配剩余空间

2、flex-shrink:定义收缩比例 默认值为1（即使超出也不会超出会压缩）。值为num；无单位

算法：
加权综合（每个项目宽度自己的shrink 的总和）
收缩值（项目的宽度shrink/加权综合）
项目实际的宽度（项目初始宽度-收缩值）

！！！注意是压缩超出空间

例：

{ width: 100px; flex-shrink: 1;  }
{ width: 200px; flex-shrink: 1; }
{ width: 200px; flex-shrink: 3; }//按照1：2：6（1*1：2*1：2*3）

3、flex-basis: 通俗的说就是宽度，

分配空间的时候要根据这一个值来进行计算，默认值auto（width属性或者内容撑开的宽度），也就是说，如果有这个属性，则按照这个属性分配，如果没有，按照width分配，width也没有，按内容撑开的宽度分配

优先级：

flex-basis > width ＞ 无宽度（内容撑开）

4、复合属性flex: flex-grow flex-shrink flex-basis;

当容器宽度改变时，会根据给定的比例进行伸缩。

5、align-self 单独的项目在交叉轴上的对齐方式

属性值：stretch //默认值
flex-start //和默认值一样
center //居中
flex-end //主轴尾对齐
baseline //基线对其
注：如果要用baseline对齐，则这些项目都要有这个属性，是按照最大的字体的基线对齐

6、order排序 值越大，越靠后，并且了还可以拉到负的值（负值排在前面）