伸缩盒模型
用法：
结构：
1 <div class="flex-container"> 2 <div class="flex-item">flex item 1</div> 3 <div class="flex-item">flex item 2</div> 4 </div>
样式：
1 .flex-container {
2 display: -webkit-flex;
3 display: flex;
4 width: 300px;
5 height: 240px;
6 background-color: Silver;
7 }
8
9 .flex-item {
10 background-color: DeepSkyBlue;
11 width: 100px;
12 height: 100px;
13 margin: 5px;
14 }
结果
2个项目在默认情况下的定位：沿着一个水平伸缩行从左至右显示。
让我们把前一个示例中的 flex-direction 改为 column。结果为
我们设置 justify-content 为 center 让伸缩项目在主轴上居中对齐：
flex-start, flex-end, 和 center 一看就懂。space-between 和 space-around 则是分配伸缩项目之间空白空间的不同方法。这张规范中的图示很好的解释了一切：
align-items 侧轴对齐
align-items 是一个和 justify-content 相呼应的属性。align-items 调整伸缩项目在侧轴上的定位方式。可能的值有：
- flex-start (默认)
- flex-end
- center
- baseline
- stretch
这里我们设置 align-items 为 center 让伸缩项目在侧轴上居中对齐：
<br />
和之前一样，flex-start, flex-end, 和 center 的意义显而易见。stretch 也很简单：它会将伸缩项目从侧轴起点拉伸到侧轴终点。baseline 则是让伸缩项目与它们的基线对齐。基线根据伸缩项目的内容计算得到。下面这张来自W3C标准的图例很好的解释了这些属性：
flex-wrap 伸缩行换行
目前为止，每个伸缩容器都有且只有一个伸缩行。使用 flex-wrap 你可以为伸缩容器创建多个伸缩行。这个属性接受以下值：
- nowrap (默认)
- wrap
- wrap-reverse
如果 flex-wrap 设置为 wrap，在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。
我们使用 flex-wrap 来看个例子：
<br />
wrap-reverse 和 wrap 一样，只是新的伸缩行会被添加到侧轴的反方向上。
margin 外边距
你应该对 margin: auto; 的这种用法很熟悉。在伸缩盒中，它也能做同样的事情，但是更加强大。一个 "auto" 的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。
这里我们在第一个伸缩项目上声明了 margin-right: auto;，导致了所有的剩余空间被合并到那个元素的右边去了：
<br />
这里我们使用 margin: auto; 来重现经典CSS布局中的圣杯：真·垂直居中：