Flex基本概念
flex（Flexinle Box 弹性布局）
作用：用来为盒模型提供最大的灵活性。
注意：设置了flex布局后当前容器内子元素的float、clear、vertical-align都会失效。
Flex布局的元素称为Flex容器，它所有子元素自动成为容器成员，称为容器项目。
容器里面默认存在两根轴：水平的是主轴（main axis）、垂直的是交叉轴（cross axis）。
主轴开始的位置（与边框的交叉点）叫做main start，结束的位置叫做main end、交叉轴的开始位置叫做cross start，结束的位置叫cross end。
项目默认沿主轴排列。
单个项目所占主轴的空间叫main size、所占交叉轴的空间叫cross size。如图所示：
容器的属性
display:flex; /*设置为弹性盒*//*主轴排序方向*/
flex-direction:row; /*主轴为水平方向，起点在左端*/
flex-direction:row-reverse;/*主轴为水平方向，起点在右端*/
flex-direction:column;/*主轴为垂直方向方向，起点在上方*/
flex-direction:column-reverse;/*主轴为垂直方向方向，起点在下方*/
/*后面两个属性简单来说就是改变主轴的位置，前两个就是主轴默认在水平方向，后面两个把主轴变为垂直方向*//*主轴对齐方式*/
justify-content:flex-start;/*默认左对齐*/
justify-content:flex-end;/*右对齐*/
justify-content:center;/*水平居中*/
justify-content:space-between;/*两端对齐，中间自动分配*/
justify-content:space-around;/*自动分配*//*侧轴对齐方式*/
align-items:flex-start; /*顶端对齐*/
align-items:flex-end; /*底端对齐*/
align-items:center; /*垂直居中*/
align-items:baseline; /*项目内文本底线对齐*/
align-items:stretch;/*项目高度自适应*//*该属性控制flex容器是单行或多行，同时主轴的方向决定了新行堆叠的方向*/
flex-wrap:nowrap; /*flex容器为单行，该情况下flex子项可能溢出容器*/
flex-wrap:wrap; /*flex容器为多行，该情况下flex子项溢出容器，溢出的部分会放置到新行，子项内部会发生断行*/
flex-wrap:wrap-reverse; /*反向wrap排列*/ /*当伸缩容器的侧轴还有多余空间时，本属性可以用来调整伸缩行在伸缩容器的对齐方式，和justify-content属性类似，请注意本属性在只有一行的伸缩容器上没有效果/
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:stretch;/*默认值，轴线占满整个交叉轴*/项目属性
/*该属性规定flex容器内被选中项目的对齐方式；注意：align-self属性可以重写容器的align-items属性*/
align-self:auto;/*默认值，继承父元素的align-items*/
align-self:stretch;/*元素被拉伸以适应容器*/
align-self:center;/*元素位于容器中心*/
align-self:flex-start;/*元素位于容器开头*/
align-self:flex-end;/*元素位于容器结尾*//*number排序优先级，数字越大，越往后排，默认0，支持负数*/
order:number;/*定义项目的放大比例，默认0，即如果存在的剩余空间也不放大；如果所有项目的flex-grow都为1，则他们将等分剩余的部分，如果一个项目的flex-grow属性为2其他的项目为1，则前者占据的剩余空间将比其他项目多一倍*/
flex-grow:number;/*定义项目的缩小比例，默认1，即如果存在的剩余空间不足时，该项目将缩小；如果所有项目的flex-shrink都为1，则所有项目都将等比例缩小，如果一个项目的flex-shrink为0，其他的项目为1，则空间不足时前者不缩小。负值对该属性无效*/
flex-shrink:number;flex-basis:number;
/*有单位px，相当于width和height*/flex:0 1 auto;
/*复合属性，设置或检索弹性盒模型对象的子元素如何分配空间；flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为flex:0 1 auto;后面两个属性可选*/