弹性盒子

• 定义弹性盒子

display: flex; 定义块级弹性盒子
display: inline-flex; 定义行内弹性盒子

• 弹性盒子子元素排列方式

flex-direction: row; 默认，水平显示
flex-direction: row-reverse; 水平显示，顺序颠倒
flex-direction: column; 垂直显示
flex-direction: column-reverse; 垂直显示，顺序颠倒

• 弹性盒子换行

flex-wrap: nowrap; 默认，不换行
flex-wrap: wrap; 必要的时候换行
flex-wrap: wrap-reverse; 必要的时候换行并且顺序反过来

• 也可以进行简写

flex-flow: 排列方式 换行;

• 弹性盒子纵轴的对齐方式

align-items: stretch; 默认值，拉伸到适应容器（在不是设置高的情况下）
align-items: center; 位于中心
align-items: flex-start; 位于开头
align-items: flex-end; 位于结尾
align-items: baseline; 根据基线进行最大的对齐

• 弹性盒子的横轴的对齐方式

justify-content: flex-start; 默认值，位于开头
justify-content: flex-end; 位于结尾
justify-content: center; 位于中心
justify-content: space-between; 平分，两边没间距
justify-content: space-around; 平分，有间距

• 设置多行对齐

align-content: stretch; 默认值，拉伸到适应容器（在不设置高的情况下）
align-content: center; 居中对齐
align-content: flex-start; 位于开头
align-content: flex-start; 位于结尾
align-content: space-around; 平均分布，两端有间距
align-content: space-between; 平均分布，两端没间距