Flex弹性布局

1.行内元素和块元素都可以设置flex

块级元素： display : flex;

行内元素： display : inline-flex;

flex-direction：设置主轴的方向。

row（默认值 左到右的顺序）row-reverse （水平位置从右往左）

column：主轴是垂直方向从上到下 row-reverse：主轴是垂直方向从下到上

2. flex-wrap 默认情况下一条轴是不会自动换行的。

换行是 flex-wrap：wrap（第一行在上面）

flex-wrap：wrap-reverse（第一行在下方）

3. justify-content：规定在主轴上的对齐方式

默认是向左对其：flex-start

向右对其：flex-end

居中：center（设置边距也不影响）

两端对齐：space-between （各项之间间隔都相等）

每个项目两侧的间隔相等 ：space-around

4. align-items 定义项目在交叉轴上对齐方式 

  flex-start：交叉轴的起点对齐 默认值

  flex-end：交叉轴的终点对齐 

  center：交叉轴的中点对齐 

  baseline: 项目的第一行文字的基线对齐