flex布局 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局原理：flex是flexible box 的缩写 意为 弹性布局 用来给盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
1.当我们的父盒子设为flex布局以后，子元素的float clear vertical-align属性将失效。
2.伸缩布局=弹性布局=伸缩盒布局=flex布局
采用flex布局的元素，称为flex容器，简称容器。他的所有子元素自动成为容器成员，称为flex项目，简称项目
常见的父项属性
flex-direction ： 设置主轴方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素排列方式（多行）
align-items：设置侧轴的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction flex-wrap flex-flow:row warp;
1.flex-direction ： 设置主轴方向
row 默认值 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下往上
2.justify-content：设置主轴上的子元素排列方式
flex-start 默认值 从头部开始 如果主轴是x轴 则从左往右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴，水平居中）
space-around 平分剩余空间
space-between 先两边贴边，在平分剩下空间
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 设置子项高度平分父元素高度
flex布局子项常见属性
flex属性
定义子元素分配剩余空间，用flex来表示占多少份数
语法：
.item{flex:<number>}
align-self
控制某一个子项在侧轴上的排列方式
order控制项目的排列顺序，默认是0；数值越小 越靠前