跨列和平衡列

要使某个元素跨列，请使用 column-span 属性，并将其值设置为 all。这样会使该元素成为一个跨列元素，跨越所有列。

多列容器的任何后代元素都可以变成跨列元素，包括直接和间接子元素。例如，直接嵌套在容器内的标题可以变成跨列元素，嵌套在多列容器内的 <section> 内的标题也可以变成跨列元素。

在下面的示例中，<h2> 元素被设置为 column-span: all，跨越所有列。

在第二个示例中，标题位于 <article> 元素内部，但仍能按预期跨越内容。

引入跨列元素后，会打断列的流动；跨列元素之后会重新开始列，实际上会创建一组新的列框。内容不会跳过跨列元素。

column-span 只能取两个值。初始值 none 表示元素不跨列，仍然保留在列中。值 all 表示元素跨越所有列。没有值可以实现部分跨列，例如让元素跨越三列中的两列。

如果跨列元素位于另一个具有边距、填充和边框或背景色的元素内部，则该框可能会出现在跨列元素的上方，其余内容显示在下方。因此，在将元素设置为跨越所有列时，应该谨慎，确保考虑这种情况。

此外，如果跨列元素出现在内容的后面，当跨列元素之后没有足够的内容来创建列时，可能会导致意外或不希望的行为。请谨慎使用跨列，并在不同的断点处进行测试，确保获得预期的效果。

平衡的列集是指所有列的內容量大致相同。当内容量与提供的空间量不匹配时，填充和平衡就很重要，例如，当在容器上声明了 height 属性时。

column-fill 的初始值为 balance。balance 的值表示所有列尽可能平衡。在片段化上下文中，例如 分页媒体，只有最后一个片段是平衡的。这意味着在最后一页，最后一组列框是平衡的。

另一个平衡值 balance-all 会平衡片段化上下文中的所有列。

此示例中的列包含一个图像和一些文本，它们是平衡的。图像不能断开，位于第一列。其他列是平衡的，填充了等量的文本。

column-fill 的 auto 值按顺序填充列，先在内联起始方向填充第一列，然后将内容放置到后续列中，而不是平衡并均匀填充所有列。在此示例中，我们将 column-fill 更改为 auto。列填充到容器的高度，在末尾留下空列。

在下一份指南中，您将学习 多列如何处理溢出，以及当列数超过容器容纳的数量时的情况。