01-弹性方框布局

第15章　弹性方框布局

如果网页显示的效果可以原来做的一样好看，就算得上是一个小奇迹了（当然，这只是相对而言！）。自从抛弃了基于表格的布局，进入到纯CSS的时代之后，开发人员经常需要使用像float、margin和position这样简单的方法，去创建复杂的页面结构——这些方法在创建的时候可能根本就不是要用于这样的目的。随着CSS的成熟和浏览器变得愈加强大，全新的可供选择的工具集也已经被提出，在接下来的这三章，我会依次对它们进行讨论。注意，我们正在超越前沿，进入边缘领域——其中甚至有一些工具集还没有准备好作为日常的使用。

我先从最接近可用状态的提议开始。弹性方框布局模块（Flexible Box Layout Module，http://www.w3.org/TR/css3-flexbox/，以下称为弹性方框）是以Mozilla用在它的许多软件产品（包括Firefox）上的语法为基础的。在弹性方框被提议为标准之后，它在KHTML布局引擎中得到了实现，而KHTML引擎则是WebKit的核心。由此，弹性方框得以在所有基于该引擎的浏览器上都有很好的实现。

而Firefox的实现现在来说已经相当旧了，也跟不上规范的变化。尽管它对该模块的再实现已经被标记为未来发布版本的优先考虑，但它目前的版本还有些怪异的地方，所以在使用中仍然存在问题——我会在这一整章与此有关的地方提供更多细节。

尽管微软还没有正式地公布，但模块中一些属性已在IE9的预先发布版中得以实现。弹性方框是否进入最后的发布版本仍然有待观察，而已经实现的属性需要使用-ms-前缀。

那么，弹性方框是如何布局的呢？弹性方框会让元素变得更加流畅，允许它们重新调整大小或改变其相对于父元素和兄弟元素的位置，无需指定位置或执行复杂的计算。这种灵活性能够理想地适应现代网页设计的需要，因为这种设计需要处理各种不同设备上多种多样的屏幕尺寸。