布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。之前的博客中也利用这一解决方案解决过居中布局等等问题。详见css--布局[1]和css--全屏布局[2]
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex布局是什么
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
但是，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex item，简称"项目"。从其他地方借过来一个图，很好的说明下面这些概念。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性
可以从flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content这6个方面对容器进行设置
flex-direction
决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row //主轴为水平方向，起点在左端
| row-reverse //主轴为水平方向，起点在右端。
| column //主轴为垂直方向，起点在上沿。
| column-reverse;//主轴为垂直方向，起点在下沿。
}分别如下图所示
flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start //（默认值）左对齐
| flex-end //右对齐
| center //居中
| space-between //两端对齐，项目之间的间隔都相等
| space-around;//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
}align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start //交叉轴的起点对齐
flex-end //交叉轴的终点对齐
| center //交叉轴的中点对齐
| baseline //项目的第一行文字的基线对齐
| stretch;//默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。
}align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center
//与交叉轴的起点对齐|终点|中点
| space-between //与交叉轴两端对齐，轴线之间的间隔平均分布
| space-around //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
| stretch;//轴线占满整个交叉轴
}
flex item属性设置
order，flex-grow，flex-shrink，flex-basis，flex，align-self属性可设置在flex item上面。
order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: ;
}
flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: ; /* default 0 */
}
flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: ; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
以上这些属性的应用，以及他们的代码之简洁可以通过之前写的布局的博客以及这篇文章的几种案例来感受得到。
我们不得不深入考究一下，这种用于实现复杂布局的一套方案的一些细节问题，比如flex item 的宽度的计算，大多数情况下，我们只在意显示的比例，这也是宽度的计算比较少被讨论的原因，但如果你想要更精确的控制 item 的显示宽度，其实你是需要去了解，在一个 flex 容器当中，item 的宽度是如何被计算出来的。
当我们把一个容器指定为 flex 容器时，它裡面的 item 其实是有著这样的设定：flex: 0 1 auto
这三个数字其实分别代表：flex-grow、flex-shrink、flex-basis，这三个属性可以说是 flex 之所以智能的原因。
比如 flex-basis，这个属性在 flex 容器为横向的时候，其实就是宽度，当我们把 item 指定成 flex: 0 0 480px 时，其实就是把它的宽度设定成 480px。但是这样并不能表现出 flex 有什么特别的地方啊？貌似有点重复设定宽度。
这时候就要讲到另外两个属性：flex-grow、flex-shrink
有的地方说这两个属性其实是双胞胎，grow 表示在 item 总宽度比容器小的时候，为了让 item 填满容器，每个 item 增加的宽度。假设有三个 basis 为 100px 的 item。我们从左到右给予 grow 值分别为 3、2、1，那么当 flex 作用之后，最左边的 item 实际增加的宽度可以算到增加的宽度是 90px，于是最后最左边 item 的宽度是 190px。
