flex布局

优点： 使用方便，根据flex规则很容易达到一定的布局效果。

缺点： 浏览器兼容性比较差，只能兼容ie9及以上 。

flex容器有以下6个属性（给父级设置）：

1 flex-direction

2 flex-wrap

3 flex-flow

4 justify-content

5 align-items

6 align-content

flex-direction属性决定主轴(main-axis)的方向：

flex-wrap(换行、包裹):

flex-flow

是指 flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content

定义了主轴上面的对齐方式

align-items

沿当前行的横轴布置弹性项目的默认行为。可以将其视为justify-content横轴的版本（垂直于主轴）

align-content

子项

flex：

设置子项占父项宽度（高度）的比例

align-self:

设置子项自己在轴上的对其方式：

flex-start

flex-end

center

主轴方向伪默认方向：

默认的宽度等于内容撑开

默认的高度等于父项的高

flex：1 设置 子项的宽度

align-seft 设置 子项在侧轴上的对齐

主轴方向改了column：

默认的高度等于内容撑开

flex：1设置 子项的高度

align-seft 设置 子项在侧轴上的对齐（水平）

默认的宽度等于父项的宽度