武林網(www.49028c.com)文章簡介：CSS的未來：游戲的變革Flexbox.

HTML5和CSS3給網絡開發者提供了新的語法標簽，本地動畫工具，服務器端字體等等新增功能，這些并不是結束。開發者正苦于為網頁設計挖出一條戰壕 - 真正的頁面排版工具，事實上，即便是最有前途的CSS3現在也仍舊是在地平線上。

雖然它可以創造出令人驚訝的復雜布局，例如CSS懸浮，定位規則，以及有些怪異的JavaScript，但是這些工具中，沒有一個是用于明確布局內容的，這就是為什么你想要在瀏覽器用這些工具實現你想要的布局是如此令人驚訝的復雜。很快的，你就可以嵌入拋出你的懸浮效果用一種更好的方式 - CSS Flexible Box Model，可以簡單稱為Flexbox。Flexbox可以讓你用幾行非常簡單的代碼創建一個復雜的布局 - 不再需要懸浮和“清除懸浮”。

也許它更加強大的一點 - 特別是建設響應網站 - Flexbox的order屬性允許你在HTML源順序中創建一個完全獨立的布局?；谝恍├碛?，你想要自己的頁腳出現在頁面上方？沒問題，只要將你的頁腳CSS設置為順序1，Flexbox也可以使它垂直居中。

Flexbox早就存在，但是它的規范被重寫了，舊的代碼就已經過時了。如果你想學習新的語法， 這里將提供一個簡單的demo。

我 們將帶你在移動設備和桌面應用上使用Flexbox進行布局設計，使用一小部分代碼實現重新安排源順序和元素的布局代碼，取代以往使用懸浮或者其他老式布 局工具所作的工作。讓你的頭腦充斥Flexbox最好的方法是看看它是如何動作的，所以一定要在Chrome，Opera或者Firefox 20+等瀏覽器上進行演示。

對于有些瀏覽器，使用Flexbox仍然有些太早。瀏覽器支持仍 在繼續改進，但是顯然地，舊的瀏覽器不會支持Flexbox，所以記住這一點。Opera 12支持新的語法，不需要前綴。Chrome支持新的語法，但是需要加上 -webkit前綴。如Opera一樣，Firefox 22支持不需要加前綴的Flexbox。V22（現在是beta版）Firefox支持舊的語法。IE 10支持舊的語法。大部分移動設備瀏覽器支持舊的語法，盡管他們開始改變。（Firefox對Flexbox的支持推遲到了V22。事實上從V20，他就 開始支持Flexbox的新語法，但是在V22版本前，此支持是默認被設置為無效的。如果你想激活它，需要再about:config中搜索 layout.css.flexbox.enabled選項，將它設置為可用，然后新的語法就可以在你的瀏覽器中使用了。）

所以，如上所述，只有兩款瀏覽器完全支持新的Flexbox語法，當然Firefox會在下個月加入，使支持新語法的瀏覽器變成三款。

但是仍有方法繞過一些問題。首先，請閱讀Chris Coyier寫的關于混合新舊語法來獲得盡可能多的瀏覽器的支持。Coyier的方法使你的Flexbox布局可以在IE9以上的版本上應用的非常漂亮。

如 果只是你自己的個人站點可以使用IE9，因為你也許只需要簡單的線性的布局。或者你可以為低版本IE提供一個額外的包含了一些懸浮或者花車的樣式單（或者 使用CSS類，如果你愿意的話）。這會使Flexbox的優點不能得以施展，因為你需要寫代碼來實現懸浮，但是當使用減少，你可以轉儲你的代碼，移植你的 網站，在web上向前發展。