他们太担心来世了，以至于都没学会怎样在这个世界上生活。 ——《杀死一只知更鸟》
CSS3新增了多列布局特性，它可以让浏览器确定何处结束一列和开始下一列，简单的说，就是CSS3多列布局可以自动将内容按指定的列数排列。多列布局的主要属性有：
- column-width: 类似于给列定义一个最小宽度
- column-count: 指定想要的列数或者说是最大列数
- column-gap: 定义列间距，相当于margin属性
- column-rule: 定义列边框，相当于border，不过它不占任何空间
- column-span: 定义多列布局中子元素的跨列效果
- column-fill: 控制每列的列高应该是一样的还是自适应的，浏览器支持情况较差。不建议使用
下面逐一介绍上面列举的属性。
1.column-width
它在多列布局中限制了每列的宽度或者说是每列的最小宽度（当分列布局容器能够装下那么多元素且分列布局容器宽度值大于column-width的时候）。下面我们考虑这种情况：在使用多列布局的时候，如果我们只设置column-width属性的话，那么当多列容器放不下它的子元素的时候会出现什么情况呢？答案就是会在X方向上分多列，尽管你没有显示column-count的值，但是此时浏览器会根据自己的计算去在x轴方向分多列以容纳多余的子元素。这个时候需要注意的是，多列布局容器并不会被因此变得更大。而且这个时候，每一列的宽度完全有浏览器决定，感觉很不可控。
如果多列布局容器能够容纳那么多元素的话，那么每一列的元素仍旧有浏览器决定。
2.column-count
它在多列布局中指定了希望的分列数或者说是最大分列数。考虑下面这些情况：如果我们我们的分列布局容器装得下那么多子元素的话，那么我们单单设置column-count的话会有什么效果？答：分列数可能和我们为column-count设置的值不同，因为此时分列布局容器有足够的空间去容纳子元素，所以这里的column-count只是一个最大分列数。这个时候分多少列，完全有浏览器考虑，但绝对会小于column-count设定值。
考虑下面这个情况：如果多列布局没有足够的空间去容纳子元素的话，那么我们单单设置column-count的话会有什么效果？答：首先，尽管放不下但是这么多子元素，但是分列布局容器并不会因此变得更大。这个时候，column-width设置的值将不会决定分列数量或者说在一定程度上也决定了。为什么这么说呢？先解释前者：column-width不会决定分列数量，因为定义上已经规定了column-count是指定最大分列数量，然而当分列布局容器放不下这么多子元素的时候，此时分列的数量很可能超过column-width设定的值。解释后者：在一定程度上也影响了分列的数量，因为我们的分列布局容器并不会变大，所以当我们显式设置了column-count的话，我们的分列布局容器里面最多也就放着column-count个列，由于这些情况，这个时候我们的count-width，count-gap被浏览器自己计算出来，所以在一定程度上也决定了最后会分多少列。
上述第二种情况是会很少遇到的，毕竟当我们布局时，一般只会限定宽度，而高度不会被限制。下面看一个例子：
.wrapper{
width: 450px;
height: 100px;
background-color: #555;
margin-left: auto; margin-right: auto; margin-top: 50px;
border: 2px solid red;
column-count: 5;
}
3.column-gap
column-gap用来设置列与列之间的间距。它可取的值有两个：normal,。当我们设定它的值为normal时，这意味着我们将靠浏览器决定列间距是多少。
4.column-rule
column-rule用来定义列与列之间的边框宽度，边框样式和边框颜色。就相当于我们的border属性一样，不过column-rule不占用任何空间位置！！！。column-rule也可以拆分为下面几个属性：column-rule-width，column-rule-style，column-rule-color。列边框不占用任何空间，列边框出现在列间距上，所以如果我们的列边框的宽度如果大于列间距的话，那么将使得列边框直接消失。
5.column-span
column-span指定了该列是否跨列展示。它有两个值可以选，分别是none：表示不跨任何列；all：表示跨越所有列。需要注意的地方，column-span应用在列元素上。而非多列布局容器上。
6.column-fill
它指定了该列是否具有相同的高度。该属性支持较差。两个值可选，分别为：auto，balance（对齐）。
最后附上一个使用多列布局的例子：
多列布局demo
END
