伸缩布局：在可伸缩的容器里设置
第一个属性（必须设置）-- 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