伸缩盒模型

用法：

结构：

1 
     
      2 
      
       flex item 1
      
3 
      
       flex item 2
      
4 
     

样式：

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布局中的圣杯：真·垂直居中：