多列布局的基本概念

Multicol 布局与 CSS 中的任何其他布局方法都不一样；它会将内容（包括所有后代元素）分割成列。这与我们在使用CSS 分页媒体创建打印样式表时将内容分割成页面一样。

在本指南和后续指南中，我们将讨论在CSS 多列布局模块中定义的以下属性

• column-width
• column-count
• columns 简写
• column-rule-color
• column-rule-style
• column-rule-width
• column-rule 简写
• column-span
• column-fill
• column-gap
• break-after
• break-before
• break-inside

通过向元素添加column-count或column-width属性，或使用columns简写，元素成为多列容器或简称multicol 容器。列是匿名盒子；在规范中将其描述为列框。

column-count属性指定您希望内容显示为多少列。然后，浏览器将为每个列框分配正确数量的空间以创建请求的列数。

在下面的示例中，我们使用column-count属性在.container元素上创建三列。然后，内容（包括.container的子元素）将在三列之间分配。

在上面的示例中，内容包装在具有默认样式的段落<p>标签内。因此，每个段落上方都有一个外边距。您可以看到此外边距如何导致第一行文本向下推。这是因为 multicol 容器由于创建了块级格式化上下文 (BFC)，因此子元素上的外边距不会与容器上的任何外边距折叠。

column-width 属性用于设置每个列框的最佳宽度。如果声明了列宽，浏览器会计算出在多列容器中可以容纳多少列该宽度，并将任何额外的空间平均分配到各列之间。因此，列宽应被视为最小宽度，因为由于额外的空间，列框可能会更宽。

对于只有一列且可用宽度小于 column-width 值的情况，列框将缩小到小于声明的列宽。

在下面的示例中，column-width 属性设置为 200px。我们会得到尽可能多的 200 像素的列以填充容器，并将多余的空间平均分配。

如果在多列容器上同时指定这两个属性，则 column-count 将充当最大列数。因此，column-width 所描述的行为将继续发生，直到达到 column-count 中指定的列数。在此之后，不会再绘制更多列，并且额外的空间将均匀分布在现有列之间，即使有足够的空间容纳更多指定 column-width 大小的列。

当同时使用这两个属性时，您获得的列数可能少于 column-count 值中指定的列数。

在下一个示例中，我们使用 column-width 为 200px 和 column-count 为 2。即使有空间容纳超过两列，我们也只会得到两列。如果空间不足以容纳两列（每列至少 200 像素），则我们只会得到一列。

您可以使用 columns 简写来设置 column-count 和 column-width 值。如果指定长度单位，则该值将用于 column-width，如果指定整数，则该值将用于 column-count。您可以设置这两个属性，并用空格分隔这两个值。

此 CSS 将产生与 示例 1 相同的结果，其中 column-count 设置为 3。

.container {
  columns: 3;
}

此 CSS 将产生与 示例 2 相同的结果，其中 column-width 为 200px。

.container {
  columns: 200px;
}

此 CSS 将产生与 示例 3 相同的结果，其中 column-count 和 column-width 均已设置。

.container {
  columns: 2 200px;
}

在本指南中，我们学习了多列布局的基本用法。在下一指南中，我们将了解可以 如何设置列的样式。