中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

設(shè)置呈現(xiàn)順序

我們有兩種方法設(shè)置呈現(xiàn)順序,可以通過設(shè)置容器元素(即設(shè)置display: box的元素)的box-direction屬性,或者我們可以用box-ordinal-group給每一個(gè)列/子元素設(shè)置一個(gè)數(shù)字來表示它們的呈現(xiàn)順序(有趣的是,這個(gè)屬性在火狐中會(huì)使元素右對(duì)齊，而谷歌Chrome和Safari是左對(duì)齊):

.flex-container-reverse {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;
}

表示反向呈現(xiàn),或:

.col-1 {
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
}

.col-2 {
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    box-ordinal-group: 3;
}

.col-3 {
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

表示col-3是第一個(gè),然后是col-1，最后是col-2。

居中對(duì)齊和兩端對(duì)齊

還有一個(gè)屬性,box-pack,可以它來規(guī)定盒子的呈現(xiàn)方式,例如居中，兩端對(duì)齊等。這個(gè)例子使三個(gè)元素在它們的父元素內(nèi)居中(有趣的是,之前設(shè)置的padding消失了):

.flex-container-center {
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    box-pack: center;
}

我們也可以讓這三個(gè)元素在父元素內(nèi)兩端對(duì)齊：

.flex-container-justify {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    box-pack: justify;
}

然而,兩端對(duì)齊貌似只在WebKit內(nèi)核瀏覽器中有效(谷歌Chrome和Safari)。

彈性盒模型布局demo

我加入了一些CSS3彈性盒模型布局實(shí)例和測試用例到我還在不斷完善中的CSS3測試套件,你可以用自己的瀏覽器看看這些例子,也可以修改代碼看看會(huì)發(fā)生什么。

瀏覽器支持

• Firefox 3.0+
• Google Chrome 5.0+
• Safari 3.2+
• iOS 3.2+ (Mobile Safari)
• Android 2.2+

這已經(jīng)是相當(dāng)好的瀏覽器支持,但不幸的是,目前仍然沒有發(fā)現(xiàn)Internet Explorer 9測試版或Opera 11測試版將要支持彈性盒模型布局的痕跡,但我希望它們可以跟上,因?yàn)槲覀冋娴男枰�一個(gè)替代方案來在web上創(chuàng)建布局。

相關(guān)閱讀

· Mozilla hacks: The CSS 3 Flexible Box Model
· Future of CSS: The Flexible Box Model

本文鏈接：http://www.95time.cn/tech/web/2011/8693.asp　

出處：網(wǎng)易用戶體驗(yàn)設(shè)計(jì)中心
責(zé)任編輯：bluehearts

上一頁 CSS3彈性盒模型布局模塊介紹 [1] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。