Flex布局
Flex是
flexible box的简称，纯粹用来布局的属性
1 flex和inline-flex
任何容器都可以知道为Flex布局，块级元素使用
display: flex;；行内元素使用inline-flex
容器使用Flex布局后，子元素的
float、clear和verticle-align属性将失效
2 基本概念
采用Flex布局的元素， 称为
flex container容器。容器内的子元素自动成为flex container的成员，称为flex-item
flex-item的排列方向是main axis：即flex-direction指定主轴是水平或是垂直
容器默认存在水平主轴main axis和垂直的交叉轴cross axis
main axis：flex-item排列的方向是主轴cross axis：与主轴垂直的是交叉轴主轴的开始和结束位置：
main start和main end交叉轴的开始和结束位置：
cross start和cross endflex-item在主轴与交叉轴占据的空间：main size和cross size
3 flex container的属性
需要在
flex container上设置的属性有6个：
flex-direction：row|row-reverse|column|column-reverse。默认值为rowrow（默认值）：主轴是水平方向，flex-item水平排列，main start在左端row-reverse：主轴是水平方向，flex-item水平排列，main start在右端column：主轴是垂直方向，flex-item垂直排列，main start在上边沿column-reverse：主轴是垂直方向，flex-item垂直排列，main start在下边沿
flex-wrap：nowrap|wrap|wrap-reverse。默认情况下，flex-item都排在一条轴线上；flex-wrap属性定义如果在一条轴线上排不下，换行的规则。
nowrap（默认值）：不换行
wrap：换行，第一行排在上方
wrap-reverse：换行，第一行排在下方
flex-flow：是flex-direction和flex-wrap的简写，默认值为row nowrapflex-flow: <flex-direction> && <flex-wrap>
justify-content：定义flex-item在主轴main-axis上的对齐方式justify-content: flex-start | flex-end | center | space-between | space-around。五个取值与主轴方向有关flex-start（默认值）：左对齐；flex-end右对齐；center居中；space-between：两端对其，flex-item间的间隔距离相等space-around：每个flex-item两侧的间隔相等，相当于设置左右margin值相等。
align-items：定义flex-item在交叉轴的对其方式align-items: flex-start | flex-end | center | baseline | strecth。五个取值与交叉轴方向有关flex-start交叉轴起点对其；baseline：flex-item的第一行文字的基线对齐stretch（默认值）：如果flex-item没有设置高度或者值为auto，将占满整个容器高度
align-content：如果容器内出现多跟轴线（即出现wrap），定义主轴在交叉轴上的对齐方式，只有一根轴线时不起作用align-content: flex-start | flex-end | center | space-between | space-around | stretchstretch（默认值）：轴线沾满整个交叉轴space-between：与交叉轴两端对齐，轴线间的间隔平均分布space-around：每根轴线两侧的间隔相等flex-start：与交叉轴起点对其
4 flex-item的属性
在
flex-item上设置的属性同样是6个：
order: <integer>;： 定义flex-item在主轴上的排列顺序。数值越小，排列越靠前，默认值为0。
flex-grow: <number>：定义flex-item在主轴上的放大比例。默认值为0：即使存在剩余空间（宽度），也不放大。如果所有
flex-item的flex-grow属性值都是1，表示它们均分剩余空间（如果有）如果一个
flex-item属性值为2，其余为1：前者占据的空间是后者的2倍
flex-shrink: <number>：定义flex-item在主轴上的缩小比例。默认值为1，即如果空间不足，该flex-item会缩小。如果所有
flex-item的flex-shrink属性值都为1，在空间不足时，都将等比例缩小flex-shrink为0的flex-item在空间不足时，不会缩小。
flex-basis: <length> | auto：定义在分配剩余空间前，flex-item占据主轴的空间main size。默认值为auto，表示flex-item本来的大小。浏览器根据这个属性计算是否存在多余空间
如果
width和height值固定为绝对长度单位（如350px），该flex-item占据固定空间
flex属性：是flex-grow、flex-shrink和flex-basis三个属性的简写，默认值为0 1 auto两个快捷值：
none表示(0 0 auto)；auto表示(1 1 auto)建议优先使用属性值，而非先单独写三个分离的属性（浏览器会自动推算相关值）
align-self：允许单个flex-item与其他flex-item在交叉轴有不同的对齐方式，可以覆盖掉align-items的值align-items: auto| flex-start | flex-end | center | baseline | strecth默认值为
auto：表示继承父元素的align-items属性没有父元素情况下等同于
stretch
