HTML5和CSS3給網(wǎng)絡開發(fā)者提供了新的語法標簽，本地動畫工具，服務器端字體等等新增功能，這些并不是結束。開發(fā)者正苦于為網(wǎng)頁設計挖出一條戰(zhàn)壕 - 真正的頁面排版工具，事實上，即便是最有前途的CSS3現(xiàn)在也仍舊是在地平線上。
?
?雖然它可以創(chuàng)造出令人驚訝的復雜布局，例如CSS懸浮，定位規(guī)則，以及有些怪異的JavaScript，但是這些工具中，沒有一個是用于明確布局內(nèi)容的，這就是為什么你想要在瀏覽器用這些工具實現(xiàn)你想要的布局是如此令人驚訝的復雜。很快的，你就可以嵌入拋出你的懸浮效果用一種更好的方式 - CSS Flexible Box Model，可以簡單稱為Flexbox。Flexbox可以讓你用幾行非常簡單的代碼創(chuàng)建一個復雜的布局 - 不再需要懸浮和“清除懸浮”。
?
?也許它更加強大的一點 - 特別是建設響應網(wǎng)站 - Flexbox的order屬性允許你在HTML源順序中創(chuàng)建一個完全獨立的布局。基于一些理由，你想要自己的頁腳出現(xiàn)在頁面上方？沒問題，只要將你的頁腳CSS設置為順序1，Flexbox也可以使它垂直居中。
?
?Flexbox早就存在，但是它的規(guī)范被重寫了，舊的代碼就已經(jīng)過時了。如果你想學習新的語法， 這里將提供一個簡單的demo雅思答案
?
?我 們將帶你在移動設備和桌面應用上使用Flexbox進行布局設計，使用一小部分代碼實現(xiàn)重新安排源順序和元素的布局代碼，取代以往使用懸浮或者其他老式布 局工具所作的工作。讓你的頭腦充斥Flexbox最好的方法是看看它是如何動作的，所以一定要在Chrome，Opera或者Firefox 20+等瀏覽器上進行演示。
?
?對于有些瀏覽器，使用Flexbox仍然有些太早。瀏覽器支持仍 在繼續(xù)改進，但是顯然地，舊的瀏覽器不會支持Flexbox，所以記住這一點。Opera 12支持新的語法，不需要前綴。Chrome支持新的語法，但是需要加上 -webkit前綴。如Opera一樣，Firefox 22支持不需要加前綴的Flexbox。V22（現(xiàn)在是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的優(yōu)點不能得以施展，因為你需要寫代碼來實現(xiàn)懸浮，但是當使用減少，你可以轉儲你的代碼，移植你的 網(wǎng)站，在web上向前發(fā)展雅思改分

轉載于:https://www.cnblogs.com/haosola/p/3141574.html

總結

以上是生活随笔為你收集整理的HTML5和CSS3：游戏的变革Flexbox的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。