Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
弹性盒模型主要就分为 “伸缩容器”和“伸缩项目” 。伸缩容器我们可以简单的理解为弹性盒模型父元素，伸缩项目就是弹性盒模型的子元素。
需要注意的是，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
<div>
<p>1</p><p>2</p><p>3</p><p>4</p>
</div>
伸缩容器(flex container)
div{
display : flex | inline-flex;
flex-direction : row | row-reverse | column | column-reverse;
flex-wrap : nowrap | wrap | wrap-reverse;
/* flex-flow : flex-direction, flex-wrap;*/
justify-content : flex-start | flex-end | center | space-between | space-around;
align-items : flex-start | flex-end | center | baseline | stretch;
align-content : flex-start | flex-end | center | space-between | space-around | stretch;
}
1. flex-direction
决定主轴方向（项目的排列方向）：
row : 水平方向 从左往右
row-reverse : 水平方向 从右往左
column : 竖直方向 从上往下
column-reverse : 竖直方向 从下往上
2. flex-wrap
是否换行
nowrap : 不换行
wrap : 换行 交叉轴方向从上往下 如果主轴是竖直方向,那么就是从左往右
wrap-reverse : 交叉轴方向从下往上 如果主轴是竖直方向,那么就是从右往左
3. flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。
4. justify-content
项目在主轴上的对齐方式
flex-start : 主轴起点对齐
flex-end : 主轴终点对齐
center : 主轴中点对齐
space-between : 两端对齐，项目之间的间隔都相等
space-around : 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items
项目在交叉轴上如何对齐
stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start : 交叉轴的起点对齐
flex-end : 交叉轴终点对齐
center : 交叉轴中点对齐
baseline : 项目的第一行文字的基线对齐
6. align-items
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
stretch : 项目实际高度会撑满整个交叉轴的长度
flex-start : 交叉轴起点对齐
flex-end : 交叉轴终点对齐
center : 交叉轴中点对齐
space-between : 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around : 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
伸缩项目(flex item)
p{
order : 0;
flex-grow : 0;
flex-shrink : 1;
flex-basis : auto;
/* flex : flex: none ; */
align-self : auto | flex-start | flex-end | center | baseline | stretch;
}
1. order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-grow
如何分配父元素多余部分,数值越大的分的越多，默认为0（不分配）
3. flex-shrink
父元素宽度不够的时候,项目是否收缩，数值越大的收缩的越多，默认为1。
4. flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5. flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6. align-self
单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
auto : 继承父元素的align-items属性
stretch : 项目实际高度会撑满整个交叉轴的长度
flex-start : 交叉轴起点对齐
flex-end : 交叉轴终点对齐
center : 交叉轴中点对齐
baseline : 项目的第一行文字的基线对齐
参考：阮一峰的网络日志
