「老」的Flexbox和「新」的Flexbox

本文由大漠根據Chris Coyier的《「Old」 Flexbox and 「New」 Flexbox》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://css-tricks.com/old-flexbox-and-new-flexbox，以及做者相關信息

——做者：Chris Coyier

——譯者：大漠

你們都清楚的知道:「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

中文譯文：http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html