为了让大家清楚了解这一点：“Flexbox”（更准确地说：CSS Flexible Box Layout Module）在过去三年中经历了很多变化。变化既体现在 规范 上，也体现在浏览器实施方面。
如何区分
如果您在 Google 上搜索 Flexbox，您会发现很多过时的信息。以下是如何快速区分它们
如果您看到一篇关于 Flexbox 的博客文章（或其他内容），其中包含 display: box; 或 box-{*} 的属性，那么您看到的是 2009 年的旧版本 Flexbox。
如果您看到一篇关于 Flexbox 的博客文章（或其他内容），其中包含 display: flexbox; 或 flex() 函数，那么您看到的是 2011 年的尴尬过渡阶段。
如果您看到一篇关于 Flexbox 的博客文章（或其他内容），其中包含 display: flex; 和 flex-{*} 属性，那么您看到的是当前（截至本文撰写时）的规范。
过时内容示例
所有这些内容在创建时都很棒，但现在已经过时了
Flexie – Flexbox 的 JavaScript polyfill，使用 2009 年的旧语法。
这篇文章 由 Richard Shepard 在尴尬的 2011 年阶段于 Smashing Magazine 上发表。它顺便提到了 2011 年的语法，但更多地关注 2009 年的语法。
Stephen Hay 一直在写关于 Flexbox 的文章。他的 介绍性文章 使用了 2009 年的旧语法，然后他做了 后续文章 来介绍 2011 年的语法，不幸的是，这篇文章是在当前语法发布前一个月发布的。
我最初对 Flexbox 感兴趣是受 这篇文章 的启发，这篇文章由 Paul Irish 撰写，使用的是 2009 年的语法。文章顶部有一个警告，但链接到 Stephen 的文章，该文章使用的是 2011 年的语法。
支持
在 浏览器支持 方面，事情变得更加复杂。
2009 年的旧语法拥有令人惊讶的良好浏览器“支持”：Chrome、Firefox 2+、Safari 3.1+… 几乎所有浏览器都支持，除了 IE 9- 和 Opera 的任何版本。我之所以说“支持”，是因为实际的实施是部分的，并且略有不同（因此需要重写）。
尽管有更多支持，但使用旧语法并不明智。旧规范已经成为过去。浏览器将来可能会放弃对旧语法的支持。至少，新的语法更容易理解，并且会被更深入、更一致地实施。不支持 Flexbox 的浏览器将实施新的规范，该规范处于“CR”（候选推荐）状态。
新的语法支持情况如下：Chrome 21+、Safari 6.1+、Firefox 22+、Opera（和 Opera Mobile）12.1+、IE 11+ 和 Blackberry 10+。
即将发布的 IE 10 似乎将附带尴尬的过渡阶段的 Flexbox（display: flexbox;）。
演示
我最近帮助某人解决了创建流体-固定-流体列布局的问题。两种语法都可以轻松实现这一点（否则相当困难）。它们将成为测试浏览器支持（和浏览器弃用）的良好参考。
“新语法”的示例不是以列形式排列的，而是以堆叠形式排列。这应该是这样的吗？
您可能是在不支持的浏览器中查看它。
嗯……我使用的是 Firefox 最新版本 14.0.1，但我遇到了相同的问题。
您有什么想法吗？这可能是由于屏幕分辨率导致的吗？我的屏幕分辨率目前是 1366×768。
无论如何，这篇文章写得不错。之前没见过。
Firefox 不支持它。
@Anders Grimsrud：啊啊啊啊啊啊啊啊啊啊啊啊啊！！！！
在 Safari 6.0（8536.25）中查看新语法：框体彼此堆叠？
Safari 6 不支持它。
这几乎可以了。有人可能已经做了一个 polyfill 了。哈哈。
我们只要稍微实现一下 CSS，就可以得到一个很好的响应式示例。
Rudy，其中一些代码似乎有点冗余。理论上，您可以删除 .col 和 .fluid 的 min-width，只设置媒体查询以使用 600px 的 max-width（以考虑左右两侧的最小 100px 和中间的 400px），然后完成它？
另外，别忘了，最好采用移动优先的方式构建，因此，您不需要使用 @media with (max-width: … ;)，而是要先构建最小的尺寸 +
@media screen and (min-width: ... ;)。看来网络发展太快了。你说 Chrome 21 处于 Beta 版，但即使这篇文章今天发布了，Chrome 21 也已经成为稳定版了。因此，从你写这篇文章到发布这篇文章，Chrome 就更新了。我使用的是稳定版通道，“新演示”对我有用。
太好了，David！
对不起，我不知道如何在这里回复？请帮忙？
所以，唯一支持新版本的浏览器是 Chrome 21 吗？
Safari 6：不支持
Chrome 20：不支持
Firefox 14：不支持
Opera 11：不支持
是的，Chrome 21+
正如 支持图表 中所述，标有“部分支持”的浏览器要么支持旧规范，要么支持旧语法。
IE 10 也支持：http://msdn.microsoft.com/en-us/library/ie/hh673531%28v=vs.85%29.aspx
有点。它支持带前缀的奇怪的 2011 年语法。我希望它在发布之前更新。什么时候发布？该死的，已经 18 个月了。
哎呀，是的，我应该在发布之前检查。我不知道 IE 10 在发布之前是否进行了最终更新；文档没有更新。我想发布日期是 10 月份。
iOS 5 也不支持新 flexbox，但它支持旧语法。
在使用这两种语法一段时间后，我不得不承认，我认为新语法在概念上更容易理解，因此要好得多。
我真的很希望顶级浏览器尽快实施新语法。
请注意，Modernizr 会测试对 flex-wrap 的支持，这显然会返回对新的 flexbox 规范的支持。（即使文档引用了 HTML5 Rocks 上的一篇旧文章，介绍了 box-* 值）。
因此，我们可以默认采用新的 flexbox（推动标准！），并在不支持时回退到旧的 flexbox。
（我删除了供应商前缀！）
selector { display: flex } .no-flexbox selector { display: box }浏览器将来可能会放弃对旧语法的支持。但就目前而言，很多人仍在使用旧浏览器，这是必须考虑的问题。
终于 Flexbox 变得有用起来。旧版本有很多缺点。#happy
你可以使用 display "box" 在 Chrome 和 Firefox 中获得相同的效果。请查看以下关于固定流体两列布局的示例。
嗯。
所以，整篇文章都是关于识别像上面这样的代码，这些代码属于“旧”语法。我不建议使用它（尽管目前它有效）。
这是唯一对我有效的代码。我一直试图根据你在 Codepen 中的代码实现 flex box，但都没有成功。我甚至将其简化到只有代码，一个 index 文件和一个 css 文件，没有其他内容。
不知何故，你在 Codepen 中编写的代码在现实世界中无法使用。它在 Codepen 中可以正常工作，但当我将其复制粘贴到实际的 html 文件中时，所有浏览器使用旧方法和新方法都会使盒子堆叠起来。
上面的代码似乎有效。
感谢这篇文章。我从未真正使用过 flexbox，也不可能使用，直到我们获得一些跨浏览器支持。希望明年你不用再写这样一篇关于新语法的博客了。
感谢 Chris
Chrome 21 显然不是 beta 版，因为我目前的版本已经是 21 的更新版本了。演示似乎运行良好。Flexbox 真的只是个诱惑而已。又一次，开发者被赋予了强大的工具来简化他们的工作，却因为浏览器的不一致和不支持而被剥夺了这些工具。要安全地实现这一点还需要很长时间。太可惜了。
http://cl.ly/IcLY
我认为稳定版和 beta 版现在都是 21。我认为他们为了支持 Retina 推出了 21 稳定版，比预期的时间提前了。
Android 仍然没有更新最新的 Flexbox 语法 http://dev.w3.org/csswg/css3-flexbox/，因此，那些也希望获得移动设备支持的人 - 使用旧语法和新语法来支持所有设备。
有人知道我们预计要等多久才能推出对它的支持吗？
我的意思是，显然，我现在还不抱太大希望，但如果 Moz 和 IE 等对它有什么看法就好了！
现在我们只需要找到一个 polyfill，可以将旧语法转换为新语法。
通过 Compass 的“display-box”混合在多个近期项目中逐步使用灵活的盒子模型后，我希望一旦这种新方法得到更广泛的支持，Compass 就会更新并用适当的更改替换我的旧代码。
（祈祷吧）
CORE-27374 是 Opera 支持 Flexbox 的主要错误的名称。所以 Opera 正在努力解决这个问题。正如你所提到的，问题在于规范的多个版本。我预计浏览器实现者和 Web 开发人员会遇到兼容性问题，因为存在大量的遗留代码。
我认为 Firefox 非常适合在线编辑 CSS。
我还制作了新语法的详细演示。
http://codepen.io/edge0703/pen/qstIo
感谢你的文章，Chris。这帮助我避免学习过时的知识。 ;)
非常感谢。我甚至不知道还有一个新的“版本”的 flexbox。
整个 Flexbox 布局模块是我职业生涯至今遇到的最令人沮丧的事情。我记得在 2009 年，也就是两份工作之前，读到过关于它的信息，当时我想，“这将使我的视觉/布局开发变得如此容易，我迫不及待地想等浏览器实现它”。
3 年后，3 年漫长的岁月过去了，我仍然处于与当时完全相同的状态：“这将使我的视觉/布局开发变得如此容易，我迫不及待地想等浏览器实现它”。
这太可惜了。我真的希望 IE10 实现当前的规范，但我不会抱太大希望。所以，我可能要等到 IE11 才能可靠地使用 flex，我确信它会在移动设备上花很长时间才能实现（而移动设备将从中获益最大），3 年后我仍然会想，“这将使我的视觉/布局开发变得如此容易，我迫不及待地想等浏览器实现它”。
长时间处于如此接近的状态，比从未了解过 box/flexbox/flex 更令人沮丧。
顺便说一句，最近的 WebKit nightly 版本支持新语法。
我最沮丧的是，我无法从 Mozilla 获得任何关于 Firefox 何时可能会实现修订后的语法的指示。目前，Firefox 是所有浏览器中最古老、最不稳定的实现。
display:flex
IE 8 和 IE 9 不支持这个。请提供任何解决方案。
除了上面 Rudy 和 David 的意见外，你们两位都为我们节省了大量时间！很高兴我首先阅读了所有这些内容！