CSS Flexible Box Model會不會是CSS的未來

文章簡介：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上向前發展。