武林網(www.survivalescaperooms.com)文章簡介：2011年Richard Shepherd在Smashingmagazine.com寫了篇文章。文章附帶的提到了2011年版本的語法，但更側重于2009年舊版本的語法。

大家都清楚的知道:“Flexbox”（全稱：CSS Flexible Box Layout Module）在過去的三年中經歷了許多變化。變化都達到了規范以及什么樣的。

如果你使用google搜索Flexbox，你會發現很多過時的信息。這里將告訴你如何迅速的辨別你需要的信息。

如果你正在查找有關于Flexbox的博客資料，你看到了“display:box;”或者“box-{*}”屬性，那么你看的正是2009年版本的Flexbox。

如果你正在查找有關于Flexbox的博客資料，你看到了“display:flexbox;”或者“flex()”函數，那么你看的正是2011年版本的Flexbox。

如果你正在查找有關于Flexbox的博客資料，你看到了“display:flex;”和“flex-{*}”屬性，那么你查看的是當前（在寫此文時）的規范。

這些東西在創建的時候都非常的棒，但對于現在而言有些過時。

Flexie——一個javascript腳本，使用的是2009年的舊版本語法。

2011年Richard Shepherd在Smashingmagazine.com寫了篇文章。文章附帶的提到了2011年版本的語法，但更側重于2009年舊版本的語法。

Stephen Hay早前就寫了一篇有關于Flexbox的教程，他的這篇教程介紹的也是2009年老版本語法，隨后他對2011版本Flexbox也做了一個跟蹤，并且分享了出來。

我第一次接觸Flexbox是來自于Paul Irish分享的教程，他使用的是2009年語法版本。頂部介紹了Flexbox的特性，并且鏈接到Stephen Hay介紹2011年語法版本的文章中。

變得有點復雜。

2009年舊版本語法得到瀏覽器較好的支持：Chrome、Firefox2+、Safari3.1+ ...除IE9和Opera幾乎所有瀏覽器都支持。我所說的“支持”，實際的實現與支持會有點不同（因此，有些需要重寫）。

盡管舊的語法得到很好的支持，但使用舊的語法并不是一個聰明的做法。舊的規范始終要淘汰。瀏覽器在未來有可能還會支持舊的語法。至少，新的語法更容易理解和更深入、更一致的實現效果。瀏覽器不支持Flexbox新的規范，主要是因為他在CR狀態，當他成為規范時，會得到瀏覽器完美支持。

新版本語法支持的瀏覽器：Chrome21+、Opera（Opera Mobile12.1+和Blackberry10+）。

在IE10中將運行Flexbox的中間版本（2011年版本）：display: flexbox;

我最近正幫助別人解決一個創建Fluid-Fixed-Fluid的布局。兩個語法都可以輕松的做到這一點。他們都充分的對瀏覽器做了測試。

舊語法案例 新語法案例

譯者手語：整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載煩請注明出處：

英文原文：