display:flexbox

伸缩盒模型

用法：

结构：

1 <div class="flex-container">
2 <div class="flex-item">flex item 1div>
3 <div class="flex-item">flex item 2div>
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 让伸缩项目在侧轴上居中对齐：

和之前一样，flex-start, flex-end, 和 center 的意义显而易见。stretch 也很简单：它会将伸缩项目从侧轴起点拉伸到侧轴终点。baseline 则是让伸缩项目与它们的基线对齐。基线根据伸缩项目的内容计算得到。下面这张来自W3C标准的图例很好的解释了这些属性：

flex-wrap 伸缩行换行

目前为止，每个伸缩容器都有且只有一个伸缩行。使用 flex-wrap 你可以为伸缩容器创建多个伸缩行。这个属性接受以下值：

• nowrap (默认)
• wrap
• wrap-reverse

如果 flex-wrap 设置为 wrap，在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。

我们使用 flex-wrap 来看个例子：

wrap-reverse 和 wrap 一样，只是新的伸缩行会被添加到侧轴的反方向上。

margin 外边距

你应该对 margin: auto; 的这种用法很熟悉。在伸缩盒中，它也能做同样的事情，但是更加强大。一个 "auto" 的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。

这里我们在第一个伸缩项目上声明了 margin-right: auto;，导致了所有的剩余空间被合并到那个元素的右边去了：

这里我们使用 margin: auto; 来重现经典CSS布局中的圣杯：真·垂直居中：

display: flexbox