flex布局
常见的父项属性
注意主轴和侧轴是会产生变化的 flex-direction设置谁是主轴另一个就是侧轴，子元素是跟着主轴排列的 默认主轴是x轴
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.设置侧轴（默认是y轴）上子元素排列方式（多行）
align-content:flex-start（默认值在侧轴的头部开始排列）
flex-end（在侧轴的尾部开始排列）
center（在侧轴的中间显示）
space-around（子项在侧轴平分剩余空间）
space-between（子项在侧轴先分布两头，在平分剩余空间）
strecth （设置子项元素高度平分父元素高度）
5.设置侧轴（默认是y轴）上子元素排列方式（单行）
align-items:flex-start（默认值从上到下）
flex-end 从下到上
center（挤在一起居中垂直居中）
strecth 拉伸（当父元素使用拉伸的时候的子元素不能给高度）
6.复合属性相当于同时设置flex-direction和flex-wrap
flex-flow:row wrap；两个属性值可以连写在一行
常见的子项属性
1、flex 子项目占得分数 占得是剩余空间
flex：数值
2、align-self 控制子项自己在侧轴上的排列方式
align-self：auto（默认值auto）属性值继承align-items的属性
3、order 定义子元素的排列顺序 可以指定哪个子元素在前面展示
order：0（默认值是0 数值越小 排列越靠前 第一个盒子是0 第二个盒子就是-1 要是想让第二个盒子在前面，order值设置成-1）
