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 设置 子项在侧轴上的对齐（水平）
默认的宽度等于父项的宽度
