Flex布局

1. 基本概念
   任何一个容器都可以指定为flex（弹性布局）
   行级元素：display：inline-flex
   webkit内核浏览器：display：-webkit-flex
   设置为flex布局后，子元素的float、clear、vertical-align属性失效
   容器默认为两根主轴：水平的主轴和垂直的交叉轴
2. 容器的六大属性
   a. flex-direction 决定主轴的方向 默认为row
   flex-direction：row/row-reverse/column/column-reverse
   row:主轴为水平方向，起点在左边
   row-reverse:主轴为水平方向，起点在右边
   column:主轴为垂直方向，起点在上边
   column:主轴为垂直方向，起点在下边
   b. flex-wrap 当一条主轴上排列不下时，如何换行 默认为nowrap
   flex-wrap:nowrap/wrap/wrap-reverse
   nowrap:不换行
   wrap:换行，第一行显示在上面
   wrap-reverse：换行，第二行显示在上面
   c. flex-flow flex-direction和flex-wrap的简写形式，默认为row nowrap
   flex-flow：flex-direction || flex-wrap
   d. justify-content 项目在主轴上的方向
   justify-content:flex-start/flex-end/center/space-between/space-around
   flex-start:左对齐
   flex-end：右对齐
   center：居中
   space-between：两端对齐，项目之间的间隔相等
   space-around:每个项目两侧的间隔都相等，所以项目之间的间隔比项目与边框的间隔大一倍
   e. align-items 项目在交叉轴上如何对齐 默认值为stretch
   align-items:flex-start/flex-end/center/baseline/stretch
   flex-start:交叉轴的起点对齐
   flex-end：交叉轴的终点对齐
   center：交叉轴的中点对齐
   baseline：项目的第一行文字的基线对齐
   stretch：项目未设置高度或高度为auto时，将占满整个容器的高度
   f.align-center
   f. align-content 多根轴线的对齐方式，一根轴线时不起作用 ，默认为stretch
   align-content:flex-start/flex-end/center/space-between/space-around/stretch
   flex-start:与交叉轴的起点对齐
   flex-end：与交叉轴的终点对齐
   center：与交叉轴的中点对齐
   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
   space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍
   stretch：轴线占满整个交叉轴
3. 项目的六大属性
   a. order 项目的排列顺序，数值越小，排列越靠前，默认值为0
   order：int
   b.flex-grow 项目的放大比例，默认为0，如果存在剩余空间也不放大
   flex-grow：number
   如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
   c.flex-shrink 项目的缩小比例，默认为1，如果空间不足也不缩小
   flex-shrink：number
   如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
   负值对该属性无效
   d.flex-basis 在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本来的大小
   flex-basis：lenght | auto
   可以设置为width\height属性一样的值，项目占据固定空间
   e.flex flex属性是flex-grow，flex-shrink，flex-basis的简写，默认值为：0 1 auto，后两个属性可选
   flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]
   f. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
   align-self: auto | flex-start | flex-end | center | baseline | stretch