这个背后有一个悲伤的故事，所以就取了个这么有点像标题党的标题，具体什么我就不说了。很早之前就知道css3里面有这么个东西，而且随着规范的改变，它的版本也改了几次。

也就是因为这个flexbox伸缩盒布局太强大了，以至于我没在意它也是display的一个属性。

要想解决这个布局问题，我们还是先了解一些基础的问题。先回顾下display有哪些属性吧：

    none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
    inline：指定对象为内联元素。block：指定对象为块元素。
    list-item：指定对象为列表项目。inline-block：指定对象为内联块元素。（CSS2）
    table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
    inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
    table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
    table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
    table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
    table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
    table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
    table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
    table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
    table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
    run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
    box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
    inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
    flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
    inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
    flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
    inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

可以看到，目前最新的版本是display:flex ;当然要是用以前过度版本的估计还有用，但我们还是跟着最新的规范来。

我们再了解下伸缩盒的定义和一些概念的东西吧：

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。

虽然现在我们可以使用 Flexbox 轻松创建布局，而不会像以前那样难以理解，但我们仍然需要花一些时间去熟悉到底如何使用 Flexbox。新的术语和概念可能会是我们使用 Flexbox 时的一个障碍，所以让我们先来了解以下它们。

Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

Flexbox 规范的相关工作已经进展了3年。不同的浏览器也实现了不同的实验版本。在2012年9月，Flexbox 语法的第三个主要修订版本进入到候选推荐阶段。这意味着 W3C 认为当前的语法是稳定的，并鼓励浏览器开发商去实现它。总之，伸缩盒布局，是我见过的最操蛋的规范，从2009发布到去年最终定下来，更弦换辙了三次。

Flexbox 规范时间表：

    2009年7月 工作草案 (display: box;)
    2011年3月 工作草案 (display: flexbox;)
    2011年11月 工作草案 (display: flexbox;)
    2012年3月 工作草案 (display: flexbox;)
    2012年6月 工作草案 (display: flex;)
    2012年9月 候选推荐 (display: flex;)

Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已经支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就会实现。我推荐大家使用已经支持的浏览器来阅读本文和查看例子。虽然如此，但是很多浏览器厂商都高了一个私有前缀，所以特别麻烦：

div{

      display: -webkit-box;

      display: -moz-box;

      display: -o-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: -moz-flex;

      display: -ms-flex;

      display: -o-flex;

      display: flex;

}

我们再来看看它有哪些属性:
Properties
属性  CSS Version
版本  Inherit From Parent
继承性  Description
简介
flex  CSS3  无  复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
flex-grow  CSS3  无  设置或检索弹性盒的扩展比率。
flex-shrink  CSS3  无  设置或检索弹性盒的收缩比率
flex-basis  CSS3  无  设置或检索弹性盒伸缩基准值。
flex-flow  CSS3  无  复合属性。设置或检索伸缩盒对象的子元素排列方式。
flex-direction  CSS3  无  设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-wrap  CSS3  无  设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-content  CSS3  无  设置或检索弹性盒堆叠伸缩行的对齐方式。
align-items  CSS3  无  设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-self  CSS3  无  设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
justify-content  CSS3  无  设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
order  CSS3  无  设置或检索伸缩盒对象的子元素出?的?序。
1:flex

取值:

none：none关键字的计算值为: 0 0 auto

[ flex-grow ]：定义弹性盒子元素的扩展比率。

[ flex-shrink ]：定义弹性盒子元素的收缩比率。

[ flex-basis ]：定义弹性盒子元素的默认基准值。

这里flex-grow,flex-shrink,flex-basis可以单独使用例如:flex-grow:1，也可以几个在一起缩写使用，例如：flex:1 1 100px;表示不扩展也不伸缩，设置宽度为100px。

看一个DEMO:

这里面一开始定义了每个Box 400px,所以第一个每个小块都是133px.第二个box(box2)由于每个块都设置了扩展和伸缩比率还有基准值100px。这里我们可以计算得:100+100+100=300px，但是因为它的ID设置了宽度为400px,所以会空出100px，但是它还有设置了扩展比率，所以计算得:100*1+100*2+100*3=600px;，最后我们可以算出每个小块将要增加的宽度:

第一个：1*100/600*100约等于17px;

第二个小块：2*100/600*100约等于33px;

第三个小块:3*100/600*100等于50px

也就是说box2里第一块区域的宽度为117px,第二小块的宽度为133px,第三个小块的宽度为150px;

同样的算法你可以去试试box3的各个宽度。
2.flex-flow

flex-flow是个复合属性，接受这两类值：[ flex-direction ] [ flex-wrap ]。

要不我们先熟悉下flex-direction和flex-wrap吧

flex-direction用来定义弹性盒子元素的排列方向。

语法:flex-direction：row | row-reverse | column | column-reverse默认值是row，无继承性。

row：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

看一个DEMO

再来看看:flex-wrap：nowrap | wrap | wrap-reverse 表示定义弹性盒子元素溢出父容器时是否换行。默认值为nowrap。可取值：nowrap：当子元素溢出父容器时不换行。wrap：当子元素溢出父容器时自动换行。wrap-reverse：反转 wrap 排列。

看一个DEMO:

现在flex-flow的属性搞清楚了，我们可以结合两个来写一个DEMO:
3.再看看align-content属性吧：

align-content：flex-start | flex-end | center | space-between | space-around | stretch
用于多行的弹性盒模型容器
各个属性值的意思：
flex-start： 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end： 各行向弹性盒容器的结束位置堆叠。弹性盒容