舊CSS Flexbox文法案例和新CSS Flexbox文法案例

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

大家都清楚的知道:“Flexbox”（全稱：CSS Flexible Box Layout Module）在過去的三年中經曆了許多變化。變化都達到了規範以及什麼樣的瀏覽器支援Flexbox。

如何辨別

如果你使用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;

DEMO

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

舊文法案例新文法案例

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

如需轉載煩請註明出處：

英文原文：http://css-tricks.com/old-flexbox-and-new-flexbox