CSS3 多列

CSS 多列布局

创建报纸式分栏

CSS 多列布局模块提供了将内容排列成多列的属性，类似于报纸中文字的排布方式。这对于以更易读的格式呈现大段文本或实现特定的视觉布局非常有用。

文本跨列流动的示例：

想象一下这段文字自然地流经多个垂直列，使其比一大段超宽文本更容易浏览。Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat。

浏览器支持

多列布局属性目前已得到所有现代网页浏览器的广泛支持，无需使用供应商前缀（如 -webkit- 或 -moz-）。虽然在旧版浏览器中需要使用前缀，但现在通常可以直接使用标准属性。

关键的多列属性

我们来探讨一下用于创建和样式化多列布局的主要属性：

• column-count
• column-width
• columns（column-width 和 column-count 的简写属性）
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule（规则属性的简写属性）
• column-span

定义列的数量（column-count）

column-count 属性明确指定元素内容应被分割成的列数。

示例：将 <div> 元素内的文本分割成 3 列：

.multi-col-container {
  column-count: 3;
}

定义列的宽度（column-width）

column-width 属性建议列的最佳宽度。浏览器将在容器的可用空间内，创建尽可能多列（每列宽度至少为此值）。

示例：建议列的最佳宽度为 200 像素：

.multi-col-container {
  column-width: 200px;
}

注意：你可以同时使用 column-count 和 column-width。浏览器将同时满足这两个约束，如果容器不够宽，实际列数可能会少于 column-count 指定的数量；如果需要填满指定列数，列宽可能会大于 column-width 的值。

columns 简写属性

columns 属性是一个简写属性，允许你在一个声明中设置 column-width 和 column-count。

.multi-col-container {
  /* 尝试使列宽为 15em，但最多创建 3 列 */
  columns: 15em 3;
}

.another-container {
  /* 相当于 column-count: 4 */
  columns: 4;
}

.yet-another-container {
  /* 相当于 column-width: 250px */
  columns: 250px;
}

指定列间距（column-gap）

column-gap 属性设置列之间的间距大小。

示例：指定列之间有 40 像素的间距：

.multi-col-container {
  column-count: 3;
  column-gap: 40px;
}

注意：gap 属性（来自盒模型对齐模块 Box Alignment module）也可以作为多列布局中 row-gap 和 column-gap 的简写，类似于它在 Grid 和 Flexbox 中的用法。

在列之间添加分隔线（column-rule）

你可以使用 column-rule-* 属性或 column-rule 简写属性在列之间绘制一条线（分隔线）。

• column-rule-width：指定分隔线的宽度（例如 1px）。

• column-rule-style：指定分隔线的样式（例如 solid、dotted、dashed）。

• column-rule-color：指定分隔线的颜色（例如 lightblue）。

使用 column-rule 简写属性的示例（设置宽度、样式和颜色）：

.multi-col-container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid lightgrey;
}

注意：列分隔线绘制在列间距的中间，本身不占用空间。

元素跨列显示（column-span）

column-span 属性允许特定的子元素（如标题或图片）跨越所有列显示，而不是仅在单列中流动。

示例：使多列容器内的 <h2> 元素跨越所有列显示：

.multi-col-container h2 {
  column-span: all;
  /* 添加一些外边距以留白 */
  margin-top: 1em;
  margin-bottom: 0.5em;
}

目前，除了默认值（none）之外，唯一有效的值是 all。

多列属性总结

属性	描述
column-count	指定所需的列数。
column-fill	控制内容在列之间的平衡方式（例如 balance、auto）。支持情况各异。
column-gap	指定列之间的间距大小。
column-rule	column-rule-width、column-rule-style 和 column-rule-color 的简写属性。
column-rule-color	设置列之间分隔线的颜色。
column-rule-style	设置分隔线的样式（例如 solid、dotted）。
column-rule-width	设置分隔线的宽度。
column-span	指定元素是否应跨越所有列（all）或不跨越（none）。
column-width	指定建议的列的最佳宽度。
columns	用于设置 column-width 和 column-count 的简写属性。

请慎重使用多列布局，因为过窄的列或跨越多列的长篇文章有时会影响可读性。