flex布局
弹性布局，当设置为flex布局之后，子元素的float、clear、vertival-align属性将会失效
- 采用flex布局的元素称为容器，其子元素称为项目；
- 容器中存在水平的主轴及垂直的交叉轴
容器属性
-
flex-direction：
row（默认） | row-reverse | column | column-reverse定义项目在主轴的排列方向即<b>改变主轴和交叉轴的方向</b>
-
flex-wrap：
nowrap（默认） | wrap | wrap-reverse定义项目在轴线上的换行方式
-
flex-flow :
row nowrap （默认）[flex-direction flex-wrap]flex-direction和flex-wrap的缩写
-
justify-content ：
flex-start（默认） | flex-end | center | space-between | space-around定义了项目在主轴上的对齐方式(<b>具体方向根据flex-direction的设置</b>)
例如 ： 当父元素设置flex-direction：column，主轴方向为垂直方向，即justify-content为垂直方向的对齐
space-between是项目两侧对齐，项目之间间隔相等；
space-around是项目两侧间隔想等，项目间隔是项目与边框之间距离的两倍 -
align-item ：
flex-start | flex-end | center | baseline | stretch（默认）定义了项目在交叉轴上的对齐方式(<b>具体方向根据flex-direction的设置</b>)
项目未设置高度时，strech会占满整个容器 -
align-content
flex-statr | flex-end | center | strecth（默认） | space-between | space-around定义多根轴线对对齐方式
多根轴线前提下，以交叉轴为对齐标准
项目属性
-
order
<integer> 数字越小，排列越靠前定义项目的排列顺序
-
flex-grow
<number> 默认为0定义项目的放大比例，flex-grow大于等于1时没有剩余空间，项目按比例放大，flex-grow小于1时则会剩余空间并且与项目为按比例展示
-
flex-shrink
<number> 默认为1定义项目的缩小比例，在flex容器空间不足的时候进行比例收缩，项目值相同的时候将会等比例收缩
负值无效
-
flex-basis
<length> 默认为auto定义在分配剩余空间之前，项目占据主轴的大小
-
flex
[flex-grow flex-shrink flex-basis] 后两项为可选，默认值为0，1，autoflex-grow flex-shrink flex-basis的缩写
-
align-self
auto | flex-start | flex-end | center | baseline | stretch定义项目自己在交叉轴上的对齐方式，与容器的align-items属性相同
auto为继承容器的属性
更多详解：flex详解指路
