CSS之Multi-columns的列数和列宽

“Multi-column”译成中文就是“多列”，这个”Multi-column”是W3C给CSS3增加的一个多列布局模块（CSS Multi-column Layout Module）。它主要应用在文本的多列布局方面，对于文本的多列布局我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示

1. 列数和列宽：column-count;column-width;columns

2. 列的间距和分列样式：column-gap;column-rule-color;column-rule-style;column-rule-width;column-rule

3. 列的分栏符：break-before;break-after;break-inside

4. 跨越列：column-span

5. 填充列：column-fill

一. column-count

作用：column-count作用主要是用来描述一个Multi元素的列数

语法：column-count: auto || 数字

取值说明：

1. auto：此值为column-count的默认值，当column-count没有设置任何值时，默认的值就是auto，此时的栏数是根据别的参数来确定的，比如说列宽width

2. 数字：这里可以是任何正整数数字，但不可以带有任何单位，用来表示Multi元素分列的列数

HTML：

CSS：

首先看第一种情况：column-count:auto。前面也说过，当column-count取值为auto时，元素分栏是由其他属性决定的比如说，比如这里的column-width，具体我们来看代码如何实现

其实column-count值为auto时，可以不要显式的设置，因为其默认值就是auto，所以上面的代码中大家可以尝试的把column-count:auto这个去掉，看看结果不是不是一样。这里有一点需要说明的就是当只用column-width来控制显示的列数时，其column-width的取值最好不要超过下面公式计算出来的值

就拿本例来说，n=2,font-size:14px;那么column-width的值应该是(400-14)/2=193px（Opera下最好再减1个px，当然如果你是中文的话也最好这样做，减1-2px，至于为什么，我也说不清楚。）;当你把column-width值大于193px时，只会显示一列

上面是column-count取值为auto的使用，现在一起来看其取值为具体数值时的应用，基于前面的实例，把列数换成三列

二. column-width

作用：column-width属性是用来控制Multi元素的列宽

语法：column-width: <length> || auto

取值说明：

1. auto:此值是其默认值。如果column-width设置值为auto或者没有显式的设置值时，此时Multi元素的列宽将由其他属性来决定，比如前面的实例就是由column-count来决定的（当然column-count的值不能为auto了，不然是无效果的）

2. <length>：此值使用固定值来设置Multi元素的宽度，其单位可以是px或者em；但不能是负值

首先来看一个普通的例子，这里所说的普通就是指元素分列的列宽不指定确定的宽度值，并且其他参数都为默认值

从效果中清楚的知道，给Multi元素仅设置auto是没有任何效果的，因为此时的值是需要根据元素的列数来定的，在这里并没有指定列数的值，所以默认为1列

在上面的实例的基础上，变通一下，给他加上一个column-count:2

注：当column-width为auto时需要配合column-count的设置才能有分列效果

总结：count和width两个属性不能同时都为auto，只能其中一个值为auto

特例：当列的宽度大于元素容器的宽度的情况

上图效果告诉我们，虽然设置的列宽大于元素容器的宽度，但并不会让元素内容按列的宽度进行布局从而撑破元素容器，而是会把列宽降到与元素容器宽度相等

三. columns

作用：columns是把前面两个属性合并在一起使用

语法：columns: column-width || column-count

取值说明：olumn-width和column-count分别是指列的宽度和列数