1、设置伸缩布局
display: flex;
2、设置固定宽度 flex-basis
flex-basis: 值;
3、弹性盒子实现多行排列 flex-wrap
flex-wrap : nowrap;
// nowrap 默认不换行
// wrap 换行
4、设置水平方向对齐方式 justify-content
justify-content: flex-start; 居左对齐
justify-content: flex-end; 居右对齐
justify-content: center; 居中对齐
justify-content: space-around; 空白环绕分布
justify-content: space-between; 空白空间平均分布
常用： space-around、center
1) space-around 在单行的情况下，视觉效果好
2）在多行时，常用 flex-start
5、设置垂直方向对齐方式 align-items( 设置单行中盒子的垂直对齐方式)
align-items: flex-start; 在单行中垂直方向上顶部对齐
align-items: center; 单行中盒子居中对齐
align-items: flex-end; 在单行中垂直方向上底部对齐
align-items: stretch; 默认，当盒子内有高度时，将盒子拉伸到最大
align-self:... 自己在垂直方向上的对齐方式
6、改变主轴方向 flex-direction
flex-direction: column; 主轴向下
# 设置侧轴多行内容对齐方式同水平对齐方式相同
align-content: flex-start; 居左对齐
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
注意： 调整主轴方向，可以纵向排布盒子
