HTML5和CSS3：遊戲的變革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上向前發展雅思改分