CSS 弹性布局如何实现


转自:http://www.blueidea.com/tech/web/2011/8693.asp

背景

首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用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不会额外增加它的宽度