/*把容器做成flex弹性盒*/
display: flex;
容器属性
1. flex-direction：项目排列方向（主轴方向）
row：左对齐，横向排列（默认）
row-reverse：右对齐，反转横向排列
column：纵向排列
column-reverse：反转纵向排列
2.flex-wrap：当项目超出容器后，项目的换行方式
nowrap：不换行（默认值）
wrap：换行
wrap-reverse：反向换行
3.flex-flow：flex-direction和flex-wrap的复合属性
4.justify-content：设置项目在主轴的对齐方式
flex-start：项目在主轴的开头
flex-end：项目在主轴的结尾
center：项目在主轴的中间位置
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目的前后间隔都相等
space-evenly：每个项目之间和之前、之后平均分配剩余空间
5.align-items：设置交叉轴的对齐方式
stretch:拉伸项目适应容器交叉轴方向大小（不设置宽度或者高度才会拉伸）
flex-start：项目在交叉轴的开头
flex-end：项目在交叉轴的结尾
center：项目在交叉轴的中间位置
baseline：项目在交叉轴的基线上
6.align-content：多行排列时（需要设置flex-wrap属性才能生效），设置交叉轴的对齐方式
stretch:拉伸项目适应容器交叉轴方向大小（不设置宽度或者高度才会拉伸）
flex-start：项目在交叉轴的开头
flex-end：项目在交叉轴的结尾
center：项目在交叉轴的中间位置
space-between：在交叉轴方向两端对齐，项目之间的间隔都相等
space-around：在交叉轴方向，每个项目的前后间隔都相等
项目属性
- order：设置项目的排序，可以是正值和负值，默认值为0，值越小顺序排列越靠前
- flex-grow：容器有剩余空间时，项目剩余空间按比例放大，不能取负值，默认值为0，即不放大，当设置多个项目的flex-grow属性时，按照比例计算剩余空间实现项目的放大
- flex-shrink：容器空间不足时，项目的缩小比例，默认值为1，即项目会缩小，不能取负值
- flex-basis：设置项目伸缩值，可以是px，%，rem等，默认值是auto，即项目本身的大小
- flex：flex-grow flex-shrink flex-basis的复合属性
- align-self：设置项目自身在交叉轴上的对齐方式
auto：继承父元素的align-items属性，默认值
flex-start：在垂直轴的开头
flex-end：在垂直轴的结尾
center：在垂直轴的中间
stretch：在垂直轴方向拉伸
baseline：在垂直轴方向基线对齐
