column-count

如果你需要创建一个多列布局，可以使用column-count属性

1
2
3

.container{
    column-count: 3;
}

column-count设置一个具体的数值，然后浏览器就会将内容平均分割中指定列数。columns属性是column-count和column-width的混合属性：

1
2
3

.container{
    columns: 200px 3;
}

如果两个属性都做了声明，则会先按照column-width设定的宽度进行分割，如果分割出的列数超过了column-count设定的值，则最终只会按照column-count设定的来值平均分割内容区域。也就是说，最终分割出的列数最多不会超过column-count规定的数值。

column-count可以设定为auto或者一个整数。当设置了column-width值时可以将column-count设置为auto以告诉浏览器，当前内容区域的分割以column-width为准。当设定为一个整数时，这个整数必须大于等于0；

和column-width不一样的是，浏览器的宽度不会对column-count的分割产生影响。比如，对于一个手机屏幕，column-count设定了5，那么显示内容就会被分割成5块，视觉上看起来就会有些拥挤。

column-count可用的地方最常见的比如瀑布流，以及其他一些需要在水平方向分割内容的地方。