武林網(www.survivalescaperooms.com)文章簡介：使用Flexbox：新舊語法混用實現最佳瀏覽器兼容。

Flexbox非常的棒，肯定是未來布局的一種主流。在過去的幾年這之中，語法改變了不少，這里有一篇“舊”和“新”新的語法區別教程（如果你對英文不太感興趣，可以移步閱讀中文版本）。但是，如果我們把Flexbox新語法、舊語法和中間過渡語法混合在一起使用，我們就可以讓瀏覽器得到完美的展示。尤其是對一個簡單的和最可能常見的實例：控制網格順序。

一個具有語義化的容器“page-wrap”，包裹了三個主要區域，并將容器設置為伸縮容器，此時容器中的每外區域自動變成了伸縮項目。

我們最終要實現的效果如下：

我們需要使用我們的列在一個伸縮容器中顯示上下文。只有這樣，這些元素才能直接成為伸縮項目。他們之前是什么沒有關系，只要現在他們是伸縮項目。

我們需要把Flexbox舊的語法、中間過渡語法和最新的語法混在一起使用，在這里他們的順序顯得非常重要。“display”屬性本身并不添加任何瀏覽器前綴，我們需要確保我們老語法不要覆蓋新語法讓瀏覽器（可能總是會）同時支持。

我們目標是制作一個20%、60%、20%網格布局。

第一步設置我們主內容區域寬度為60%。

第二步設置側邊欄來填補剩余的空間。

同樣把新舊語法混在一起使用：

在新的語法中，沒有必要給邊欄設置寬度，因為他們同樣會使用20%比例填充剩余的40%空間。但是我發現，如果不給他們顯式的設置寬度，在老的語法下會直接崩潰。

我希望主內容排列在中間，但在源碼之中他是排列在第一的位置。使用Flexbox可以非常容易實現，但是我們需要把Flexbox幾中不同的語法混在一起使用：

如果你將Flexbox多版本混合在一起使用，可以得到以下瀏覽器的支持：

最在的限制當然是IE瀏覽器了，但在其他方面很好。如果你正在做一個特定的移動版本網站，你也會得到更好的支持。如果有誰在window版本手機上測試，麻煩告訴我一下測試結果。

Firefox19有點問題，你需要在觀察一下它。例如，在這個案例中，我無法近死側邊欄為20%。這個只是折疊到內容的寬度里，這樣說或許有點武斷。我需要設置“-moz-box-flex:1”，否則主內容（60%）會伸展到和最寬的段落，就像是段落設置了“white-space:nowrap”，這一點簡直是莫名其妙。

CodePen的案例

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

如需轉載煩請注明出處：

英文原文：