CSS3弹性盒模型布局模块介绍

来源：Robert’s talk
原文：http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/

Web布局一直个是难点，但貌似现在我们有更好的选择了。

背景

首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。

然后是现在大多数人都在使用的浮动布局。我们可以使用任何我们想用的元素,但浮动并不适用于初学者。表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏幕不知所措。另外,浮动布局有一个缺点就是需要通过额外的元素清除浮动,或者更好一点,可以清除CSS浮动而不添加额外的标签。

这些缺点使得浮动布局不是很容易掌握，因为没有一个默认的方法可以建立起浮动与元素之间的关系，所以我们还需要更多的方法来实现多栏等高布局。

然后有些人开始使用display: table,display: table-cell等,但由于直到IE8 Internet Explorer浏览器才支持,人们似乎放弃了而只是接受float作为实际解决方案。

介绍弹性盒模型布局模块(aka Flex Box)

有一个隐藏的利器,就是大多数人似乎已经忽视的弹性盒模型布局模块。它提供了:

• 等高的栏目。
• 独立的元素顺序。
• 指定元素之间的关系。
• 灵活的尺寸和对齐方式。

一个简单的例子

当我们想要显示一个三栏布局，我们会这样做:

 

<div class="flex-container">
    <div class="col-1">I am column 1</div>
    <div class="col-2">I am column 2</div>
    <div class="col-3">I am column 3</div>
</div>

 

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

我们使用display属性把容器元素设为 box,然后我们用box-orient属性,将它设置水平(你也可以使用vertical设为垂直)。

用这个方法,直接子元素(如<div class=”col-1″>等)将被一个接一个水平放置,它们的宽度由它们的内容决定。但是如果我们想用自适应的方法让它们扩展到整个容器元素的宽度该怎么办呢?那么我们就需要为它们设置box-flex:

 

.col-1 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
.col-2 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
.col-3 {
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;

}

box-flex属性的值是指父容器中除了子容器以外的剩余空间如何被子容器分割,就像佐伊评论的,数字越大分到的越多。这也意味着每个元素的padding不会额外增加它的宽度(不错吧?)。

设置呈现顺序

我们有两种方法设置呈现顺序,可以通过设置容器元素(即设置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