伸缩容器以下6个属性作用在伸缩容器上
伸缩流方向 flex-direction
伸缩流换行 flex-wrap
伸缩流(包括方向与换行) flex-flow
主轴对齐 justify-content
侧轴对齐 align-items
堆栈伸缩行 align-content
【1】伸缩流方向:指定主轴的方向(即伸缩项目在伸缩容器中的排列方向)
CSS Code复制内容到剪贴板
//伸缩流方向: 水平方向 | 反向水平 | 垂直方向 | 反向垂直
//新版本同混合版本
flex-direction: row[默认] | row-reverse | column | column-reverse
//旧版本
box-orient: horizontal(水平) |vertical(垂直) |inline-axis[默认](内联轴方向) |block-axis(块级轴方向)
box-direction: normal(正常) | reverse(反向)
【2】伸缩流换行:指定伸缩项目溢出伸缩容器时是否换行
CSS Code复制内容到剪贴板
//伸缩行换行:不换行 | 换行 | 反转换行
//新版本同混合版本
flex-wrap: nowrap[默认] | wrap | wrap-reverse
//旧版本，没有浏览器支持box-lines属性，所以在旧版本中无法实现伸缩项目换行显示
box-lines: single[默认] | multiple | N/A
【3】伸缩流:伸缩流方向与伸缩行换行的缩写
CSS Code复制内容到剪贴板
//伸缩流: 伸缩流方向 | 伸缩行换行
//新版本同混合版本
flex-flow: <flex-direction> | <flex-wrap>
[默认值] flex-flow: row nowrap
//旧版本无对应属性
【4】主轴对齐:用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间
当一行上的所伸缩项目不能伸缩或可伸缩已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制
