新css属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment，Flexibox Box以及Multi-column Layout这三大领域。

这篇文章最早出现在 the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者，全球销量最高的杂志。

按照以往来说，用CSS来布局看起来总是一样非常繁杂的工作。然而，随着一个个新标准的推出，网页设计者已经能够实现非常轻松地进行布局工作了。

主流的浏览器，在W3C的推动下，已经开始实现多种新型的布局方式，而且我们现在已经可以开始使用了。举个例子，W3C开始把CSS3 Multicolumn Layout Module考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。

前缀(Vendor prefixes)

虽然一些浏览器对属性普遍的认知，但这并不代表着你就不能采用这些属性。在现在，我们可以通过添加前缀来获得一些主流浏览器对属性的支持，直到这些属性得到了稳定的支持，我们才有可能不用添加这些前缀。Jonathan Snook说，添加供应商前缀就相当于做了两件事情：

• 让开发者在调试新功能的时候，不用担心转换浏览器有不兼容的情况。
• 可以告诫网页开发者这些东西是不稳定的。

存在某些争议的前缀一文中人们在讨论是否需要添加前缀的时候，这个做法确实为人们在标准完全确定之前提供了一个提前体验这些属性的机会，当然了，人们在这时候使用这些属性都还需要小心翼翼的。下面我们会看到这些布局属性各种浏览器的使用范围，一般来说，你也许不需要这些浏览器都需要支持这些属性，但还是很有必要对这些有个宏观的了解。

多列布局（Multi-column）

下面我来介绍第一个布局特征，让我们就从简单的开始，css的Multi-column布局模块。（下面统称Multi-column）你可能想得到，这个模块给予了我们脱离position和float这些属性，就能在网页栏目上布局的能力。

同样，根据容器的大小，就可以控制创建栏目的数量，这是非常了不起的一个特点。举个例子，如果你需要一个栏目宽度为13em（用ps作为长度单位也是可以的）的容器，并且根据这个容器的大小，创建数量适合的栏目数，上代码！

#mcexample {   column-width: 13ems; } 

看到了没，简单吧！你还可以自己定义栏目的数量，在这个时候，这些栏目就会自动平均分配栏目宽度，尽量充满容器的宽度。

#mcexample {   column-count: 3; } 

如果你想更具体地控制你的栏目，也行！举个例子，下面的代码，可以让你控制栏目的数目，栏目的自身宽度，栏目与栏目之间的间隔等样式。上代码！

#mcexample{   columns: auto 13em;/* column-count,column-width*/   column-gap: 1em;   column-rule: 1em solid black;/* width, style, color */ } 

一些其他的属性有如下功能：

• 定义栏目的最大限度
• 定义在多栏目中的间隔大小
• 在多个栏目中平均分配好显示内容

Multi-column好就好在能够自动为你安排好流体内容，你用不着计算确定栏目的数量，让他们排排站好就行了！

然而，在使用Multi-column的时候，你还是有东西要注意下的，你要注意设置栏目的高度，否则别人在访问网站的时候，就因为高高的栏目，看个栏目内容还要上拉下拉滚动条那么费劲，这用户体验那该有多不好。

大部分的桌面浏览器和移动浏览器都支持Multicolumn（对于IE来说，你现在只能在IE10的平台上来预览一下）。一个快速查询一个属性是否被浏览器支持的方法就是到caniuse.com查找主流的桌面和移动浏览器是否都支持这些属性。我们要记住的是，也许一个属性是被支持的，但是也是添加浏览器供应商前缀，有些浏览器也不完全对属性进行支持，总之，我们一定要多测试，这才能更好地解决问题，避免不必要的麻烦。

伸缩性布局（Flexbox）

Flexible Box 的css布局模块，在w3.org/TR/css3-flexbox中可以查得到。为了方便起见，下面这一模块统称 Flexbox。

Flexbox 赋予了我们能够对一个父级容器中子级元素进行水平以及垂直的定位，并且在这些子级元素的彼此之间都添加间距的能力。

举个例子，在IE10中使用Flexbox，首先就要用到display属性，上代码！

#fbexample {       display: -ms-flexbox;         background: black;   } 

同样，我们还可以设置子级元素排列的方向，不过我们需要在添加相应的的浏览器供应商的前缀（对于IE10来说，我们需要在开头的地方添加-ms-flexbox），上代码！

#fbexample {   display: -ms-flexbox;   -ms-flex-direction: row; } 

Flexbox让我们能够以多种方式排列子级元素：从左到右，从右到左，从上到下，从下到上。在这时候我们或许需要定义子级元素的排列坐标轴方向。

下面的代码同样控制了每个子级元素都在父级容器中间显示，同样，对于每个子级元素来说上下的空间分配都是一样的

#fbexample {   display: -ms-flexbox;   -ms-flex-direction: row;   -ms-flex-align: center; } 

我们还可以用另一个属性flex-pack，这个属性控制子级元素如何分配剩余的空间。举个例子来说，首先我们要使得子级元素按照一定的方向在父级元素中排列：

#fbexample {   display: -ms-flexbox;   -ms-flex-direction: row;   -ms-flex-align: center;   -ms-flex-pack: start; } 

但是我们如果有过多的子级元素，而且我们不希望他们的尺寸被压缩到一个不是我们想要的情况的时候该怎么办呢？好吧，在这个时