布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
09年，W3C 提出了Flex 布局。
三种情况：
1、display: flex;
2、display: inline-flex; //行内元素也可以使用 Flex 布局
3、display: -webkit-flex; /* Safari */
display: flex; //Webkit 内核的浏览器，必须加上-webkit前缀
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

属性
以下6个作用在容器上：
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（（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。）;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

以下6个作用在项目上：
order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。