HTML5和CSS3为网页设计人员提供了新的语义标签，奇特的动画，服务端字体等等，然而并不仅仅是这些。网页设计下一个主要的发展可能会围绕HTML5和CSS3都没有关注的一点――页面布局。

    对于这两项新技术中的所有出色的新工具来说，使页面元素按你希望的方式自动布局的任务依然没有完成。人们通常使用浮动，绝对定位以及偶尔使用JavaScript来完成该工作，但是对于只是将元素定位在页面上这样的任务来说，这些代码就显得有些繁琐了。

    肯定有更好的方法。比如，如果你可以很简单地使用很少行数的代码来定义一个box并在里面定位子元素不是很美好么？代码有可能像这样：

 section { display: box;}
 section p#first { box-flex: 3;}
 section p#second { box-flex: 2;}

    这些CSS规则告诉浏览器我们的section标签应该是一个box。在box里面有两个并排的段落，其中第一个比第二个占去稍微多一点的空间。浏览器通过box-flex规定的比例计算两个p标签的宽度并显示结果――没有浮动，没有像素宽度，不需要其它规则。

    如果这对你来说是个好消息，那么你肯定会很高兴地听到上面的代码在最新的Firefox，Safari和Chrome下已经可以使用了，它们都支持W3C的灵活盒布局模块。

    了解过程――因为每一项出现在web标准时总是会有一个了解过程――是W3C正计划一个针对灵活盒布局语法进行重大的重写。换言之，试验性的项目可以很好地使用灵活盒布局规则(vendor prefixes支持你)，但是在产品代码里不要使用它。要了解灵活盒布局规则是如何工作的，签出Google开发者Paul Irish的write up on HTML5Rocks。

    灵活盒布局模块不是W3C考虑的唯一改进布局的CSS工具。还有两个其它的标准也在考虑之中――模板布局(基于Mozilla的XUL语法)，以及网格定位。这三种方法使用不同的语法来完成相似的任务，所以它们不可能最终都成为官方标准。当前灵活盒布局模块和模板布局用得比较多一些。

    想大体了解这三种模块是如何工作的，可以下载网页开发者Peter Gasston最近在伦敦Web标准会议上的演讲的视频。Gasston演讲的标题是“How We’ll Lay Out Websites In 2016”，但是我们乐观地认为这些工具将可以更早得多地工作于大部分浏览器中。

    当然还有一个大问题――Internet Explorer，它不支持其中的任何一种工具(一些灵活盒布局工具的支持出现在早期发行的IE9预览版中，但是好像在最新的预览版中好像又去掉了)。但是有一些好消息，特别是对于灵活盒布局模块，已经有JavaScript polyfill for older browsers来模拟。

    虽然灵活盒布局模块非常酷，但是要在产品中使用这些新规则还需要一点时间。浮动，绝对定位和其它笨拙的布局工具还将伴随我们，便是至少一些更好的东西已经开始出现在我们的视野了。

    查看英文源文

建议继续学习：

1. 瀑布流布局浅析    (阅读：6051)
2. Android用户界面设计：表格布局    (阅读：4871)
3. 各浏览器的默认CSS    (阅读：3714)
4. HTML页面布局基础    (阅读：3699)
5. CSS 忍者：安全的 CSS hacks 秘籍    (阅读：2837)
6. 使用CSS框架的优点和缺点    (阅读：2652)
7. 12个很少被人知道的CSS事实    (阅读：2665)
8. 手机产品框架层设计: 两种主要的布局方式    (阅读：2458)
9. 移动网站开发――CSS    (阅读：2275)
10. 多栏自适应布局问题浅谈    (阅读：2226)