灵活的盒子布局
CSS Flexible Box 的出现，解决了许多网页设计师的噩梦1。最 hacky 之一，垂直对齐。现在，即使在未知的高度也可以实现。
“二十年的布局黑客即将结束。也许不是明天，
但很快，在我们的余生中。”
— CSS 传奇Eric MeyerW3Conf 2013
Flexible Box（或简称 Flexbox）是一种专门为布局目的而设计的新布局系统。 specification states：
Flex 布局表面上类似于块布局。它缺少很多
可以使用的更复杂的以文本或文档为中心的属性
在块布局中，例如浮动和列。作为回报，它变得简单
以及用于分配空间和对齐内容的强大工具
webapps 和复杂网页经常需要的。
在这种情况下它有什么帮助？好吧，让我们看看。
垂直对齐的列
使用 Twitter Bootstrap，我们有 .rows 和一些 .col-*s。我们需要做的就是将所需的.row2 显示为flex container 框，然后通过align-items 属性垂直对齐其所有flex items（列）。
EXAMPLE HERE（请仔细阅读cmets）
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
输出
彩色区域显示列的填充框。
澄清align-items: center
8.3 Cross-axis Alignment: the align-items property
Flex items可以在flex容器当前行的cross axis对齐，类似于justify-content，但方向垂直。 align-items 为所有 flex 容器的项目设置默认对齐方式，包括匿名 flex items。
align-items: center;
按中心值，flex item 的边距框位于行内cross axis 的中心。
大警报
重要说明 #1： Twitter Bootstrap 不会在超小型设备中指定列的 width，除非您将 .col-xs-# 类之一指定给列。
因此，在这个特定的演示中，我使用了.col-xs-* 类，以便在移动模式下正确显示列，因为它明确指定了列的width。
但您也可以关闭 Flexbox 布局，只需在特定屏幕尺寸中将display: flex; 更改为display: block;。例如：
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
或者你可以像这样specify .vertical-align only on specific screen sizes：
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
在这种情况下，我会选择@KevinNelson 的approach。
重要提示 #2： 为简洁起见，省略了供应商前缀。 Flexbox 语法在此期间已更改。新的书面语法不适用于旧版本的网络浏览器（但不如 Internet Explorer 9 旧！Internet Explorer 10 及更高版本支持 Flexbox）。
这意味着您还应该在生产模式下使用带有供应商前缀的属性，例如 display: -webkit-box 等。
如果您点击Demo 中的“切换编译视图”，您将看到 CSS 声明的前缀版本（感谢Autoprefixer）。
内容垂直对齐的全高列
正如您在previous demo 中看到的那样，列（弹性项目）不再与其容器（弹性容器框。即.row 元素）一样高。
这是因为 align-items 属性使用了 center 值。默认值为stretch，以便项目可以填满父元素的整个高度。
为了解决这个问题，您也可以将display: flex; 添加到列中：
EXAMPLE HERE （再次提醒，请注意 cmets）
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
输出
彩色区域显示列的填充框。
最后但并非最不重要的一点，请注意这里的演示和代码 sn-ps 旨在为您提供不同的想法，提供实现目标的现代方法。如果您打算在现实世界的网站或应用程序中使用这种方法，请注意“大警报”部分。
对于包括浏览器支持在内的进一步阅读，这些资源会很有用：
1. Vertically align an image inside a div with responsive height2.最好使用一个额外的类，以免改变 Twitter Bootstrap 的默认 .row。