探索CSS中的多列布局
介绍
内容在多列和多列杂志样式布局之间流动的布局现在可以使用 CSS 多列布局 规范中定义的一些简单规则在 CSS 中轻松实现。 这与 CSS grid 和 flexbox 一起，真正让我们能够以最小的努力定义几乎任何类型的布局。 让我们回顾一下目前在多列布局方面的可能性。
基本的多列布局
多列布局是使用在包含块元素上设置的 column-count 或 column-width 属性定义的。
列数
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>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。
要创建响应式布局，只需在较小的视口上设置不同数量的列即可：
@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>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。
如果您调整视口大小，您会注意到使用 column-width 将使多列布局默认响应，而无需为较小的视口定义不同的列数。
列
column-count 和 column-with 还有一个简写属性，称为 columns。 以下是如何将容器设置为具有 2 列或宽度为 12rem 的列：
.col-2-12rem {
columns: 2 12rem;
}
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。
对于大多数用例来说，同时设置列数和列宽可能有点奇怪，因为它由浏览器决定遵循提供的计数或宽度。
差距和规则
您可以使用 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>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。
列规则
规则只是包含内容的两列之间的一条线。 column-rule 的值与边框属性值的格式相同：
.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>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。
柱跨度
通过将 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>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
够花哨的标题
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。
在撰写本文时，Firefox 不支持 column-span。
分栏符
您可以使用 break-before、break-inside 和 break-after 属性以及 avoid 值来控制元素应如何在列之间断开 或 避免列 。 这是一个简单的示例，其中段落元素不会分成多列：
.breaks p {
break-inside: avoid-column;
}
<article class="col col-3 breaks"> <p>...</p> <h3>Fancy-enough Title</h3> <p>...</p> <p>...</p> </article>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
够花哨的标题
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat。 Aliquam erat volutpat。 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus。
没有 break-inside 规则的相同示例看起来像这样，其中段落可以流到多个列：
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
够花哨的标题
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat。 Aliquam erat volutpat。 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus。
列填充
column-fill 控制内容如何在列之间分布。 初始值 [X19X]balance 向浏览器指示内容应在列之间均匀分布。
首先，这是一个示例，我们在多列容器上设置了一个硬编码的高度，并且由于 balance 的初始值而使内容均匀分布：
<article class="col col-3 b30" style="height: 400px;"> <p>...</p> <p>...</p> <p>...</p> </article>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat。 Aliquam erat volutpat。 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus。
现在这是相同的示例，但将 column-fill 设置为 auto ：
<article class="col col-3" style="column-fill: auto; height: 500px;"> <p>...</p> <p>...</p> <p>...</p> </article>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 多尼奥迪奥。 Quisque volutpat mattis 爱神。 Nullam malesuada erat ut turpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。
Donec nec justo eget felis facilisis 发酵。 Aliquam porttitor mauris 坐在 amet orci。 Aenean dignissim pellentesque felis。
Morbi in sem quis dui placerat ornare。 Pellentesque odio nisi，euismod in，pharetra a，ultricies in，直径。 Sed 弧形。 后果自负。 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat。 Aliquam erat volutpat。 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus。
结论
多列属性是另一个现代 CSS 布局工具，与 CSS 网格和 flexbox 一起使创建者能够快速定义灵活和动态的布局。
浏览器支持：截至 2020 年，我可以使用多列吗？ 显示 99% of 全球浏览器支持上面讨论的多列属性。 标记为支持 partial 的浏览器不支持本文未讨论的 column-context: avoid-column 等属性。
