flex（flexble box的缩写）弹性布局
作用：
1.能高效方便的控制元素对齐，排列
2.可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定还是动态的
3.控制元素在页面的布局方向
4.按照不同于DOM所指定排序方式对屏幕上元素重新排序
决定主轴的方向
语法：
flex-direction：row|row-reverse|column|column-reverse
属性值含义：
row（默认）、row-reverse：主轴水平方向，起点在左端，右端
column、column-reverse：主轴为垂直方向，起点在上沿，下沿
设置成flex布局后，子元素的float就失效了，定位仍然可以使用
flex-direction决定主轴方向，默认值为row，不换行
默认情况下，项目都排在一条线上（又称“轴线”上）
flex-warp：nowrap
设置主轴方向，默认不换行，从左到右
从右到左为 flex-direction：row-reverse
主轴方向从上到下
flex-direction：column
颠倒
flex-directio：column-reverse
flex布局默认不换行，默认情况下，项目都排在一条线（又称“轴线”上）
换行 flex-wrap：nowrap
上下颠倒 flex-wrap：wrap
flex-flow是复合属性，设置主轴方向和是否换行
justify-content 主轴的对齐方式
语法：
justify-content：flex-start|flex-end|center|space-between|space-around
属性含义
对应的主轴方向为水平方向
justify-content：flex-start（默认）左对齐
justify-content：flex-end 右对齐
justify-content：center 居中 （表示水平方向居中）
flex布局不像绝对定位，会脱离文档流，flex布局设置了还是在文档流布局中
space-between 子元素靠边对齐，两端对齐
space-around 子元素左右距离保持一样，相邻子元素之间的距离会变大（2倍）
space-evenly 子元素相邻的距离保持一致
align-items 定义项目在交叉轴上对齐方式
语法 align-items：flex-start|flex-end|center|baseline|stretch；
属性值：对齐方式于交叉轴方向有关，下面假设交叉轴从上到下
flex-start： 交叉轴的起点对齐 垂直方向顶部
flex-end： 交叉轴的终点对齐 垂直方向的底部
center： 交叉轴的中点对齐 垂直方向居中
baseline：项目的第一行文字的基线对齐 垂直方向按照子元素所在的位子所进行对齐
stretch（默认值） ：如果项目未设置高度或者设为auto，占满整个容器的高度
