flex 伸缩布局

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;

注意： 调整主轴方向，可以纵向排布盒子