多列布局的基本概念
多列布局，通常称为 multicol 布局，是一种将内容布局到一组列框中的规范，就像报纸中的多列一样。本指南将通过一些常见用例示例来解释该规范的工作原理。
关键属性
Multicol 布局与 CSS 中的其他任何布局方法都不同；它将内容（包括所有后代元素）分段到列中。这与我们使用CSS 分页媒体创建打印样式表时，内容被分段到页面中的方式相同。
在本指南及后续指南中，我们将讨论 CSS 多列布局模块中定义的以下属性
定义列
通过向元素添加 column-count 或 column-width 属性，或使用 columns 简写，该元素将成为一个多列容器或简称 multicol 容器。这些列是匿名框；它们在规范中被描述为列框。
指定列数
column-count 属性指定你希望内容显示的列数。然后浏览器将为每个列框分配正确的空间量，以创建所需的列数。
在下面的示例中，我们使用 column-count 属性在 .container 元素上创建三列。然后，内容（包括 .container 的子元素）将在三列之间分割。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
}
在上面的示例中，内容被包裹在带有默认样式的段落 <p> 标签中。因此，每个段落上方都有一个外边距。你可以看到这个外边距如何导致第一行文本下移。这是因为多列容器会创建一个块级格式化上下文 (BFC)，因此子元素上的外边距不会与容器上的任何外边距发生折叠。
指定列宽
column-width 属性用于设置每个列框的最佳宽度。如果你声明了一个列宽，浏览器将计算出有多少该宽度的列可以容纳在多列容器中，并将任何额外空间平均分配给这些列。因此，列宽应被视为最小宽度，因为列框可能会因额外空间而更宽。
在单个列中，如果可用宽度小于 column-width 的值，则列框将收缩，使其小于声明的列宽。
在下面的示例中，column-width 属性设置为 200px。我们将获得尽可能多的 200 像素列，以适应容器，并平均共享额外空间。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 200px;
}
同时指定列数和列宽
如果你在多列容器上同时指定这两个属性，那么 column-count 将作为最大列数。因此，将发生 column-width 所述的行为，直到达到 column-count 中的列数。在此之后，将不再绘制更多列，并且额外空间将均匀分布在现有列之间，即使有足够的空间容纳指定 column-width 大小的更多列。
当同时使用这两个属性时，你可能会获得比 column-count 值中指定的列数更少的列。
在下一个示例中，我们使用 200px 的 column-width 和 2 的 column-count。即使有空间容纳两列以上，我们也只得到两列。如果空间不足以容纳两列，每列至少 200 像素，我们只得到一列。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 2;
column-width: 200px;
}
列属性的简写
你可以使用 columns 简写来设置 column-count 和 column-width 值。如果你指定一个长度单位，该值将用于 column-width，如果你指定一个整数，该值将用于 column-count。你可以设置这两个属性，用空格分隔这两个值。
此 CSS 将产生与第一个示例相同的结果，column-count 设置为 3。
.container {
columns: 3;
}
此 CSS 将产生与第二个示例相同的结果，column-width 为 200px。
.container {
columns: 200px;
}
此 CSS 将产生与第三个示例相同的结果，column-count 和 column-width 都已设置。
.container {
columns: 2 200px;
}
后续步骤
在本指南中，我们学习了多列布局的基本用法。在下一个指南中，我们将探讨我们能如何样式化列本身。