本文已参与「新人创作礼」活动，一起开启掘金创作之路。
flex布局
弹性盒布局，flex容器，子元素flex项目
默认两根轴：水平轴和垂直交叉轴，项目默认沿主轴排列
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
一、容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1、flex-direction : 决定主轴方向（项目的排列方向）
row : 默认值，主轴水平，起点左端
row-reverse : 主轴水平，起点右端
column : 主轴垂直，起点上端
column-reverse : 主轴垂直，起点下端
2、flex-wrap : 各项目是否有换行
nowrap : 默认值，不换行
wrap : 换行
wrap-reverse : 换行，第一行在下方
3、flex-flow : 是flex-direction 和 flex-wrap 的简写 默认值 row wrap
4、justify-content : 定义项目在主轴上的排布方式
flex-start : 左对齐
flex-end : 右对齐
center : 居中
space-betwoon : 两端对齐，项目之间间隔相等
space-around : 每个项目间隔相等，所以项目之间间隔比两端间隔大一倍
5、align-items : 定义项目在交叉轴上如何对齐
flex-start : 上对齐
flex-end : 下对齐
center : 垂直居中
baseline : 项目的第一行文字基线对齐
stretch : 默认值，如果项目为设置高度或者auto，将沾满整个容器高度
6、align-content : 定义了多根轴线的对齐方式（约束交叉轴方向上）。如果只有一根轴线，不起作用
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
二、项目上的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1、order : 定义项目的排列顺序。数值越小，越靠前，默认值 0
2、flex-grow : 定义项目放大比例。默认0，即如果存在剩余空间，也不放大
如果所有项目flex-grow:1,则平分剩余空间，按照占比分空间
3、flex-shrink : 定义项目缩小比例。默认1，即空间不足，项目默认缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效
4、flex-basis : 定义了在分配多余空间之前，项目占据的主轴空间。
可以设为跟width或height属性一样的值固定px，项目占据固定空间
5、flex : 是flex-grow、flex-shrink、flex-basis 简写，默认：0 1 auto，后两个属性可选值
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6、align-self : 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items，默认auto。
flex-start : 上对齐
flex-end : 下对齐
center : 垂直居中
baseline : 项目的第一行文字基线对齐
stretch : 默认值，如果项目为设置高度或者auto，将沾满整个容器高度
