简介

内容在多栏之间流动的布局和多栏杂志风格的布局现在可以很容易地在Css中实现，使用一些简单的规则定义为Css多栏Layout规范的一部分。这一点，再加上css grid和flexbox，]，确实允许我们以最少的努力定义几乎任何类型的布局。让我们来看看目前在多列布局方面的可能性。

基本多栏布局

使用在包含块元素上设置的Column-Count或Column-Width属性定义多列布局。

列数

Column-count 取块元素应具有的列数的整数值：

1.col {
2  background: var(--subtle-yellow2);
3  padding: 1rem 2rem;
4}
5
6.col-3 {
7  column-count: 3;
8}

1<article class="col col-3">
2  <p>...</p>
3  <p>...</p>
4  <p>...</p>
5</article>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

要创建响应布局，只需在较小的视区上设置不同数量的列即可：

 1@media (max-width: 600px) {
 2  .col-3 {
 3    column-count: 1;
 4  }
 5}
 6@media (min-width: 601px)  and (max-width: 900px) {
 7  .col-3 {
 8    column-count: 2;
 9  }
10}

列宽

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

1.col-8rem {
2  column-width: 8rem;
3}

1<article class="col col-8rem">
2  <p>...</p>
3  <p>...</p>
4  <p>...</p>
5</article>

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

<$>[注意]如果调整视区的大小，您会注意到使用列宽将在默认情况下使多列布局具有响应性，而不需要为较小的视区定义不同数量的列。<$>

专栏

还有一个用于Column-count 和** Column-with** 的速记属性，称为Columns。下面是如何将容器设置为有2列或宽度为12 rem的列的方法：

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

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

<$>[警告]对于大多数用例来说，同时设置列数和列宽可能有点奇怪，因为随后将由浏览器决定遵循提供的计数还是列宽。<$>

差距与规则

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

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

1.col-gap-5rem {
2  column-gap: 5rem;
3}

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

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

栏目规则

规则只是两个包含内容的列之间的一条线。column-rule 的值与border属性的值格式相同：

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

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

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

列跨度

将Column-span属性的值设置为All 时，可以在多列元素中包含跨越整个宽度并强制换行符的元素：

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

1<article class="col col-fancy-rule col-3 col-gap-5rem">
2  <p>...</p>
3
4  <h3>Fancy-enough Title</h3>
5
6  <p>...</p>
7
8  <p>...</p>
9</article>

Fancy-enough Title

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

<$>[警告]在撰写本文时，Firefox不支持列跨距。<$>

分栏符

您可以使用Break-Beats、Break-Inside和Break-After属性以及值AVOVE 或** AVOVE-COLUMN** 来控制元素在列之间的拆分方式。下面是一个简单的示例，其中段落元素不会分成多个列：

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

1<article class="col col-3 breaks">
2  <p>...</p>
3
4  <h3>Fancy-enough Title</h3>
5
6  <p>...</p>
7  <p>...</p>
8</article>

Fancy-enough Title

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. 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规则的相同示例如下所示，其中段落可以流向多个列：

Fancy-enough Title

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

列填充

列填充控制内容在列之间的分布方式。初始值Balance 向浏览器指示内容应在各列之间均匀分布。

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

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

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

下面是相同的示例，但将列填充设置为AUTO ：

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

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

结论

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

<$>[信息] 浏览器支持： 截至2020年，Can I Use multicolumn？显示全球99%的浏览器支持以上讨论的多列属性。标记为HAVING_PARTIAL_SUPPORT的浏览器不支持本文未讨论的Column-Context：Avide-Column等属性。<$>

探索 CSS 中的多栏布局

简介

基本多栏布局

列数

列宽

专栏

差距与规则

栏目规则

列跨度

Fancy-enough Title

分栏符

Fancy-enough Title

Fancy-enough Title

列填充

结论