flex布局

首先需要给大盒子设置display：flex flex一共有两条轴，主轴和交叉轴

然后就可以使用flex的6个属性

1.flex-direction 决定主轴的方向，一共有4个属性

主轴水平

row：默认值 从左往右排列

row-reverse：从右往左排列

主轴垂直

column：从上往下排列

column-reverse：从下往上排列

2.flex-wrap 本来是一条水平排列的，这个属性可以决定是否换行

nowrap：默认值  不换行

warp：换行，第一行在最上面

warp-reverse：换行，第一行在最下面

3.flex-flow flex-direction和flex-warp的组合属性，默认值为row和nowrap

4.justify-content 主轴的对齐方式

flex-start 左对齐

flex-end 右对齐

center 居中对齐

space-between 两端对齐，且左右两边没有留空隙

space-around 两端对齐，左右两端留有空隙

5.align-items 交叉轴上对齐方式

flex-start 起点对齐

flex-end 终点对齐

center 居中对齐

stretch 上下占满

baseline 第一行文字的基线对齐