7.弹性容器

弹性盒是CSS3中新添加的布局方式，通过它可以更加方便完成我们对网页的布局
通过弹性盒模型，可以便捷完成网页中的各种布局

弹性容器
- 要使用弹性盒必须先将元素设置为弹性容器
display:flex 块级弹性容器
display:inline-flex 行内弹性容器
弹性子元素（弹性项）
- 弹性容器的子元素都会自动变成弹性子元素
- 弹性子元素都会沿着弹性容器的主轴排列
主轴
- 主轴就是弹性子元素排列方向
侧轴（辅轴）
- 侧轴是与主轴垂直方向的轴

主轴
- 主轴就是弹性子元素排列方向
- 如何设置主轴方向：
flex-direction
可选值：
row 主轴是自左向右水平排列
column 主轴是自上向下垂直排列
row-reverse 主轴是自右向左水平排列
column-reverse 主轴是自下向上垂直排列
- 设置元素是否换行
flex-wrap
可选值：
nowrap 元素不会自动换行
wrap 自动换行
wrap-reverse 反向换行
flex-flow：
flex-direction 和 flex-wrap的简写属性
可以同时设置两个样式并且没有顺序和数量的要求
侧轴（辅轴）
- 侧轴是与主轴垂直方向的轴

justify-content 设置元素在主轴上的对齐方式
可选值：
start 默认值，元素靠主轴起始位置对齐
end 元素靠主轴的结束位置对齐
center 沿主轴方向居中对齐
space-between 将主轴方向空白位置分配到两个元素之间
space-arou