设置呈现顺序

我们有两种方法设置呈现顺序,可以通过设置容器元素(即设置display: box的元素)的box-direction属性,或者我们可以用box-ordinal-group给每一个列/子元素设置一个数字来表示它们的呈现顺序(有趣的是,这个属性在火狐中会使元素右对齐，而谷歌Chrome和Safari是左对齐):

.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;
}

表示反向呈现,或:

.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是第一个,然后是col-1，最后是col-2。

居中对齐和两端对齐

还有一个属性,box-pack,可以它来规定盒子的呈现方式,例如居中，两端对齐等。这个例子使三个元素在它们的父元素内居中(有趣的是,之前设置的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;
}

我们也可以让这三个元素在父元素内两端对齐：

.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;
}

然而,两端对齐貌似只在WebKit内核浏览器中有效(谷歌Chrome和Safari)。

弹性盒模型布局demo

我加入了一些CSS3弹性盒模型布局实例和测试用例到我还在不断完善中的CSS3测试套件,你可以用自己的浏览器看看这些例子,也可以修改代码看看会发生什么。

浏览器支持

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

这已经是相当好的浏览器支持,但不幸的是,目前仍然没有发现Internet Explorer 9测试版或Opera 11测试版将要支持弹性盒模型布局的痕迹,但我希望它们可以跟上,因为我们真的需要一个替代方案来在web上创建布局。

相关阅读

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

本文链接：http://www.blueidea.com/tech/web/2011/8693.asp　

出处：网易用户体验设计中心
责任编辑：bluehearts

上一页 CSS3弹性盒模型布局模块介绍 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。