Flex布局

布局原理

当父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效

给父盒子添加的属性

（1）flex-direction：设置主轴方向
row：从左向右
row-reverse：从右向左
column：从上向下
column-reverse：从下向上

（2）justify-content：设置主轴上的子元素排列方式
flex-start：从主轴头部开始
flex-end：从主轴尾部开始
center：在主轴居中对齐
space-around：平分剩余空间
space-between：先两边贴边，在平分剩余空间

（3）flex-wrap：设置子元素是否换行
nowrap：不换行
wrap：换行

（4）align-content：设置侧轴上的子元素排列方式（多行）
space-around：平分剩余空间
space-between：先两边贴边，在平分剩余空间

（5）align-items：设置侧轴上的子元素排列方式（单行）

（6）flex-flow：复合属性(flex-direction、flex-wrap)

给子盒子添加的属性

flex：表示所占份数
align-self：控制子项在侧轴上的排列方式