介绍

内容在多栏和多栏杂志样式布局之间流动的布局现在可以使用CSS 多栏布局规范中定义的一些简单规则在 CSS 中轻松实现。这与CSS grid和flexbox 一起，确实允许我们以最少的努力定义几乎任何类型的布局。让我们来看看目前多列布局的可能性。

基本的多列布局

多列布局是通过在包含块元素上设置的列数或列宽属性来定义的。

列数

column-count为块元素应具有的列数取一个整数值：

.col {
  background: var(--subtle-yellow2);
  padding: 1rem 2rem;
}

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

<article class="col col-3">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

要创建响应式布局，就像在较小的视口上设置不同数量的列一样简单：

@media (max-width: 600px) {
  .col-3 {
    column-count: 1;
  }
}
@media (min-width: 601px)  and (max-width: 900px) {
  .col-3 {
    column-count: 2;
  }
}

列宽

使用column-width，不是提供确切的列数，而是为它们提供建议的宽度，并且将根据该宽度和可用空间计算列数。这是一个列宽为8rem 的示例：

.col-8rem {
  column-width: 8rem;
}

<article class="col col-8rem">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

如果您调整视口的大小，您会注意到默认情况下使用column-width将使多列布局具有响应性，而无需为较小的视口定义不同数量的列。

列

column-count和column-with还有一个速记属性，称为columns。以下是将容器设置为具有 2 列或宽度为 12rem 的列的方法：

.col-2-12rem {
  columns: 2 12rem;
}

对于大多数用例，同时设置列数和列宽可能有点奇怪，因为它会留给浏览器来决定是遵循提供的计数还是宽度。

差距和规则

您可以使用column-gap属性指定列之间间隙的宽度，并且可以使用column-rule属性在间隙的中间定义一条规则（线）。

列间隙

默认情况下，如果没有指定，大多数浏览器将使用1rem的列间隙。这是一个带有 5rem 列间距的示例：

.col-gap-5rem {
  column-gap: 5rem;
}

<article class="col col-gap-5rem col-3">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

列规则

规则只是包含内容的两列之间的一条线。该值列的规则是相同的格式为边框属性值：

.col-fancy-rule {
  column-rule: 3px dotted hotpink;
}

<article class="col col-fancy-rule col-3 col-gap-5rem">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

列跨度

将column-span属性设置为all值后，您可以在跨整个宽度的多列元素中放置元素并强制换行：

.col h3 {
  column-span: all;
  border-bottom: 2px solid var(--subtle-green1);
}

<article class="col col-fancy-rule col-3 col-gap-5rem">
  <p>...</p>

  <h3>Fancy-enough Title</h3>

  <p>...</p>

  <p>...</p>
</article>

在撰写本文时，Firefox 不支持column-span。

分栏符

您可以使用break-before、break-inside和break-after属性以及避免或避免列的值来控制元素应如何在列之间中断。这是一个简单的示例，其中段落元素不会分成多列：

.breaks p {
  break-inside: avoid-column;
}

<article class="col col-3 breaks">
  <p>...</p>

  <h3>Fancy-enough Title</h3>

  <p>...</p>
  <p>...</p>
</article>

没有闯入规则的相同示例如下所示，其中段落可以流向多个列：

列填充

column-fill控制内容在列之间的分布方式。初始值balance向浏览器指示内容应该在列之间均匀分布。

首先，这是我们在多列容器上设置硬编码高度的示例，并且由于balance的初始值，内容均匀分布：

<article class="col col-3 b30" style="height: 400px;">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

现在这是相同的示例，但将column-fill设置为auto：

<article class="col col-3" style="column-fill: auto; height: 500px;">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

结论

多列属性是另一种现代 CSS 布局工具，它与 CSS 网格和 flexbox 一起使创作者能够快速定义灵活和动态的布局。

浏览器支持：截至 2020 年，我可以使用多列吗？显示 99% 的全球浏览器支持上面讨论的多列属性。标记为部分支持的浏览器不支持column-context: avoid-column本文中未讨论的属性。