如果一个盒子display是flex，那么这个盒子就称为伸缩容器。
伸缩容器下面的子元素称为伸缩项。
flex-flow是一个综合属性，它包含了flex-direction、flex-wrap两个小属性。
flex-direction：用来调整主轴方向的
row：所有的伸缩项在一行显示（水平方向显示，从左至右 默认值）
row-reverse：对齐方式与row相反
column：所有伸缩项在一列显示（垂直方向 从上至下）
column-reverse：对齐方式与column相反
flex-wrap：用来设置当伸缩项总宽度大于伸缩容器时的显示方式
默认情况：当伸缩项加起来的总宽度大于伸缩容器的宽度时，对伸缩项（主轴方向是垂直的）进行压缩。
nowrap：默认值 不会进行压缩
wrap：当伸缩项加起来的总宽度大于伸缩容器的宽度时，换行显示。
wrap-reverse：反转 wrap 排列
justify-content：设置伸缩项在主轴方向上的对齐方式
可选值 flex-start：默认值 按照主轴的起点对齐（注意：flex-start并不总是左对齐，它跟flex-direction有关。）
flex-end：按照主轴的终点对齐
center：在伸缩容器中居中对齐
space-between：当伸缩项的总宽度小于伸缩容器的宽度时，会自动将剩余的空间进行平分，
平分到每一个盒子的间距。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。
align-items：设置伸缩项在侧轴方向的对齐方式
可选值 stretch：拉伸 默认值（注意：如果想要stretch值生效，侧轴是垂直方向，那么高度不能定死；
侧轴是水平方向的，那么宽度不能定死。）
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，
则会向两个方向溢出相同的长度）。
baseline：确保每个伸缩项的文本基线对齐
align-self：设置伸缩项在侧轴上的对齐方式
注意：align-self是在伸缩项上面设置的
align-items和align-self的区别
align-items是在伸缩容器上设置的，针对所有伸缩项进行统一设置；
align-self是在伸缩项上设置的，针对某一个伸缩项单独设置。
align-content：设置多行伸缩容器在侧轴方向上的对齐方式
可选值：center
space-between
space-around
flex-start
flex-end
stretch
注意：单行时，该属性无效。
伸缩盒子
order：设置伸缩项的顺序
flex：
flex是一个综合属性，它可以分为flex-grow、flex-shrink、flex-basis三个小属性
flex-grow：拉伸伸缩项以达到充满整个伸缩容器内容区的目的
注意：flex-grow只是平分伸缩容器剩余的空间
flex-shrink：将伸缩项进行压缩以达到刚好可以放入伸缩容器中的目的
flex-basis
当主轴方向为水平方向时，flex-basis等于width属性
当主轴方向为垂直方向时，flex-basis等于height属性
当一个元素同时具备width/height属性和flex-basis属性时，width/height属性会被覆盖掉
通常我们都会使用flex: 1;这种写法
flex: 1 == flex-grow: 1
flex-shrink: 1
flex-basis: 1