灵活的箱体布局
随着CSS Flexible Box的出现，许多网页设计师的噩梦1都得到了解决。其中最俗气的就是垂直对齐。现在，即使在未知的高度也有可能。
“20年的布局攻略即将结束。也许不是明天，
但很快，而且是我们的余生。”
- CSS传奇Eric Meyer在W3Conf 2013
Flexible Box(或简称Flexbox)是一种新的布局系统，专门为布局目的而设计。该规范规定:
Flex布局表面上类似于块布局。它缺少很多
可以使用的更复杂的以文本或文档为中心的属性
在块布局中，如浮动和列。作为回报，它得到了简单
以及分配空间和调整内容的强大工具
web应用程序和复杂网页通常需要的。
它对这种情况有什么帮助呢?让我想想。
垂直对齐柱
使用Twitter引导，我们有一些。col-*的。行。我们所需要做的就是将所需的.row2显示为一个伸缩容器框，然后通过align-items属性垂直对齐其所有伸缩项(列)。
这里的例子(请仔细阅读评论)
<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;
}
输出
彩色区域显示列的填充框。
明确对齐项:居中
8.3跨轴对齐:align-items属性
伸缩项可以在伸缩容器当前行的十字轴上对齐，类似于justify-content，但方向是垂直的。Align-items为所有伸缩容器的项设置默认对齐方式，包括匿名伸缩项。
对齐项目:中心;
根据中心值，伸缩项的边距框位于该行内的十字轴中心。
大的警报
重要提示#1:Twitter Bootstrap不会在特别小的设备中指定列的宽度，除非你给列指定一个.col-xs-#类。
因此，在这个特定的演示中，我使用了.col-xs-*类，以便在移动模式下正确地显示列，因为它显式地指定了列的宽度。
但你也可以通过更改显示来关闭Flexbox布局:flex;显示:块;在特定的屏幕尺寸。例如:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
或者你可以只在特定的屏幕大小上指定.vertical-align，如下所示:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
在这种情况下，我会选择@KevinNelson的方法。
重要注意#2:为了简洁，省略了供应商前缀。在此期间，Flexbox语法已被更改。新编写的语法不能在旧版本的web浏览器上运行(但不是像Internet Explorer 9那么老!Internet Explorer 10及更高版本支持Flexbox)。
这意味着您还应该在生产模式中使用供应商前缀的属性，如display: -webkit-box等。
如果你在Demo中点击“Toggle Compiled View”，你会看到CSS声明的前缀版本(感谢Autoprefixer)。
内容垂直对齐的全高列
正如您在前面的演示中看到的，列(伸缩项)不再像它们的容器(伸缩容器盒)那么高。例如，.row元素)。
这是因为使用中心值对齐项目属性。默认值是stretch，这样项目就可以填充父元素的整个高度。
为了解决这个问题，你可以添加display: flex;对列也一样:
这里的例子(再次强调，注意注释)
.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 */
}
输出
彩色区域显示列的填充框。
最后，但并非最不重要的是，这里的演示和代码片段旨在为您提供不同的想法，提供实现目标的现代方法。如果您打算在现实世界的网站或应用程序中使用这种方法，请注意“大警报”部分。
为了进一步阅读，包括浏览器支持，这些资源将是有用的:
Mozilla开发者网络-灵活的盒子
指南Flexbox - CSS技巧
HTML5Rocks - Flexbox quick
SmashingMagazine -中心元素与Flexbox
Philip Walton -由Flexbox解决
我可以使用:灵活的盒子布局模块
1. 垂直对齐div内的图像与响应高度
2. 为了不改变Twitter Bootstrap的默认.row，最好使用一个额外的类。
