為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

日期：2013-4-26??來源：GBin1.com

相關(guān)閱讀：

使用Flexbox布局方式的簡(jiǎn)單演示

HTML5和CSS3給網(wǎng)絡(luò)開發(fā)者提供了新的語法標(biāo)簽，本地動(dòng)畫工具，服務(wù)器端字體等等新增功能，這些并不是結(jié)束。開發(fā)者正苦于為網(wǎng)頁設(shè)計(jì)挖出一條戰(zhàn)壕 - 真正的頁面排版工具，事實(shí)上，即便是最有前途的CSS3現(xiàn)在也仍舊是在地平線上。

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

也許它更加強(qiáng)大的一點(diǎn) - 特別是建設(shè)響應(yīng)網(wǎng)站 - Flexbox的order屬性允許你在HTML源順序中創(chuàng)建一個(gè)完全獨(dú)立的布局。基于一些理由，你想要自己的頁腳出現(xiàn)在頁面上方？沒問題，只要將你的頁腳CSS設(shè)置為順序1，Flexbox也可以使它垂直居中。

Flexbox早就存在，但是它的規(guī)范被重寫了，舊的代碼就已經(jīng)過時(shí)了。如果你想學(xué)習(xí)新的語法， 這里將提供一個(gè)簡(jiǎn)單的demo。

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

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

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

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

如 果只是你自己的個(gè)人站點(diǎn)可以使用IE9，因?yàn)槟阋苍S只需要簡(jiǎn)單的線性的布局。或者你可以為低版本IE提供一個(gè)額外的包含了一些懸浮或者花車的樣式單（或者 使用CSS類，如果你愿意的話）。這會(huì)使Flexbox的優(yōu)點(diǎn)不能得以施展，因?yàn)槟阈枰獙懘a來實(shí)現(xiàn)懸浮，但是當(dāng)使用減少，你可以轉(zhuǎn)儲(chǔ)你的代碼，移植你的 網(wǎng)站，在web上向前發(fā)展。

via 極客標(biāo)簽

來源：CSS的未來：游戲的變革Flexbox

轉(zhuǎn)載于:https://my.oschina.net/gbin1/blog/127045

總結(jié)

以上是生活随笔為你收集整理的CSS的未来：游戏的变革Flexbox的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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