flex布局

父元素的属性：

设置父容器 display : flex;
flex-direction 设置主轴的方向
flex-direction ： row；
row 默认值 主轴为X轴 从左至右排列
row-reverse 主轴为X轴 从右至左排列
column 主轴为Y轴 从上至下排列
column-reverse 主轴为Y轴 从下至上排列
justify-content:设置主轴上子元素的排列方式
flex-start 默认值
flex-end 从尾部开始排列
center 在主轴居中
space-around 平分剩余空间
space-evenly：子元素之间距离都相等
space-between 两边贴边 再平分剩余空间
flex-wrap: 设置子元素是否换行
默认值 不换行
wrap 换行
align-items : 设置侧轴上子元素的排列方式(单行)
center 居中
flex-start 默认值
fle-end 从下到上
stretch 拉伸(子元素不能设置高度）
baseline：项目第一行文字的基线对齐
align-content: 设置侧轴上子元素的排列方式(多行)
flex-start 默认值
flex-end 在侧轴的尾部开始排列
center 在侧轴居中
space-around 子元素在侧轴平分剩余空间
space-between 子元素在侧轴先分布在两头，再平分剩余空间
stretch 设置子元素高度平分父元素高度
flex-flow属性是flex-direction和flex-wrap的复合属性
flex-flow: 设置主轴的方向 是否换行；
flex-flow: row wrap;

子元素的属性：

flex：属性定义子元素分配父元素的剩余空间，用flex来表示占多少份数，
flex属性是flex-grow, flex-shrink 和flex-basis的简写，默认值为0 1 auto。后两个是可选属性
flex：1；
align-self: 控制子元素自己在侧轴上的排列方式
align-self: flex-end;
order: 控制排列顺序
order:1;
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-grow:1;