伸缩属性

 伸缩布局：在可伸缩的容器里设置 

 第一个属性（必须设置）-- display:flex；

1.默认状况下若是伸缩容器的一行放不下全部的伸缩项，那么系统会自动等比压缩全部的伸缩项。

2.在伸缩容器中有一个叫作flex-wrap属性，专门用于控制放不下是否须要换行的，默认取值:flex-wrap 不换行/ wrap：放不下就换行，而不是等比压缩/ wrap-reverse：放不下就换行，以行为单位进行反转。

 

第二个属性：align-content ---- 专门用于设置换行以后的对齐方式。（侧轴默认是Y轴）

注意点：只有伸缩项发生了换行这个属性才有效。

flex-start：换行以后和侧轴的起点对齐，一行接一行。

flex-end：换行以后和侧轴的终点对齐，将全部换行以后的内容当作一个总体来操做。

center：换行以后和侧轴的中点对齐。

space-between：换行以后在侧轴的两端对齐。

space-around：换行以后在侧轴的环绕对齐。

stretch：以行为单位进行拉伸，拉伸的部分以空白填充，保证拉伸以后全部的行加起来可以填满侧轴。

 

第三个属性：order：0；-- 专门用于来对伸缩项进行排序的。

默认状况下每个伸缩项都有一个order属性，用于决定排序的前后顺序，默认状况下全部的伸缩项的order属性的取值都是0。咱们能够经过修改order属性的取值来实现伸缩项的排序。排序的规则：从小到大的排序，越小的显示在越前面。

 

第四个属性：flex-grow  --- 用于控制当全部伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充本身，以便于全部伸缩项宽度的总和可以填满整个伸缩容器。

默认状况下flex-grow的取值是0，表示咱们设置的宽度是多少就按照多少来显示，不进行任何的扩充。

注意点：只有当全部伸缩项的宽度总和小于伸缩容器宽度的时候这个属性才有效。

flex-grow扩充的公式：

1.利用伸缩容器宽度-全部伸缩项的宽度 = 剩余空间 600 - 300 = 300

2.利用剩余空间 / 全部须要扩充份数的总和 = 每一份的大小

300 / (1 + 4 + 8) = 23.07

 

来自为知笔记(Wiz)