一 说明
flex布局是一种html盒模型布局方式。
二 使用
基于父元素。父元素必须使用display:flex;来声明其子元素使用flex布局。
除了声明display，其还有以下属性来控制子元素的布局：
1) 属性名称：flex-direction 主轴方向
属性值：
row（自左向右横向布局）
row-reverse（自右向左横向布局）
column（自上而下竖向布局)
column-reverse（自下而上竖向布局）
2) 属性名称：justify-content 对齐方式
属性值：
flex-start 从起点开始
space-between：先两边贴边，再平分剩余空间
space-around:平分剩余空间
center：居中
flex-end:从终点开始
3) 属性名称：flex-wrap 换行方式
属性值：
nowrap：不换行
wrap：换行
4) 属性名称：align-items 单行侧轴对齐方式
属性值：
flex-start 从起点开始
flex-end:从终点开始
center：居中
stretch：拉伸，不能设置元素高度
5) 属性名称：align-content 多行侧轴对齐方式
属性值：
flex-start 从起点开始
flex-end:从终点开始
center：居中
space-around:平局分剩余空间
space-between：先两边贴边，再平分剩余空间
stretch：拉伸，不能设置元素高度
6) 属性名称：合写flex-directon和flex-wrap
三 子项属性
flex：所占剩余空间的份数，盒子必须有宽高，然后才能有剩余。
比例=子项flex值/各子项flex值加和
align-self：单个子项的对齐方式
order：修改排列顺序
