Flex Container(容器)
1.flex-direction
主轴方向，默认是row
可取值：row | row-reverse | column | column-reverse;
2. flex-wrap
是否换行，默认nowrap，不换行
可取值：nowrap | wrap | wrap-reverse;
3. justify-content
主轴上的对齐方式，默认flex-start，左对齐
可取值：flex-start | flex-end | center | space-between | space-around;
4. align-items
flex item即项目在交叉轴的对齐方式，默认stretch，占满整个容器的高度
可取值：flex-start | flex-end | center | baseline | stretch;
5. align-content
多根轴线的对齐方式，默认stretch
可取值：flex-start | flex-end | center | space-between | space-around | stretch;
6. flex-flow
实际上是flex-direction flex-wrap的简写，默认值是row nowrap
Flex Item（项目）
1. flex-grow
felx item的放大比例，默认0，也就是即使存在剩余空间，也不放大
可取值：一个数字，用来设置item占剩余空间的比率。
2. flex-shrink
felx item的缩放比例，默认是1，也就是空间不足时，按比率缩小
可取值：一个数字，用来设置item占缩小空间的比率。若为0，则当前空间不缩小，成立的前提是其他item不为0，是正数。
3. flex-basis
在分配多余空间之前，flex item占据的主轴空间，即flex item在被放入flex container之前的大小，也就是flex item的理想大小
可取值：auto | inherit | initial | 一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
这个属性实际上是width的替代品，如果flex item设置了flex-basis或者width，那么父容器会先预留这么多空间给它，剩余的才归入剩余空间让设置了flex-grow的flex item进行瓜分。如果同时设置了width和flex-basis，则取flex-basis的值；如果width和flex-basis有一个是auto，另一个非auto的属性优先级会高；可以使用min-width和max-width来限制flex-basis的值，也就是min-width和max-width优先级高。
4. align-self
单个item的对齐方式可以与其他不同，默认auto,表示继承父元素的align-items属性，若没有则等同于stretch
可取值：auto | flex-start | flex-end | center | baseline | stretch;
5. order
flex item的排列顺序，默认是0
数值越小，越靠前。
6. flex
实际上是flex-grow flex-shrink flex-basis的简写，默认值0 1 auto，后面两个属性可选
可取值：flex-grow flex-shrink flex-basis | auto | initial | inherit | none;
取值情况：
(1) auto（1 1 auto）
(2) none（0 0 auto）
(3) flex取非负数字，则该数字视为flex-grow值，flex-shrink取1，flex-basis取0%
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
(4) flex取一个长度或百分比，则该数字视为flex-basis值，flex-grow为1，flex-shrink取1
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
(5) flex取两个非负值，则分别视为flex-grow和flex-shrink的值，flex-basis取0%
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
(6) flex取一个非负值和一个长度或百分比，则分别视为flex-grow和flex-basis的值，flex-shrink取1
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}
