列布局

您可能希望使用列实现许多设计模式

• 内容的连续线程被分成报纸样式的列.
• 一行项目排列成列，所有高度都相等.
• 多行列按行和列对齐.

您需要选择不同的布局方法才能满足您的需求。

如果使用多列布局创建列，则文本将保持为连续流，依次填充每一列。所有列必须大小相同，并且您无法定位单个列或单个列的内容。

您可以使用 column-gap 或 gap 属性控制列之间的间隙，并使用 column-rule 在列之间添加规则。

在此示例中，我们使用 column-width 属性设置列在浏览器添加其他列之前所需的最小宽度。 columns 简写属性可用于设置 column-width 和 column-count 属性，这两个属性都可以定义允许的最大列数。

何时使用多列

• 您希望文本以类似报纸的列显示。
• 您有一组想要分成列的小项目。
• 您不需要针对单个列框进行样式设置。

Flexbox 可用于通过设置 display: flex; 将内容分成列，以使父元素成为弹性容器。只需添加此一项属性，就会将所有子元素（子元素、伪元素和文本节点）变成沿着单行的 flex 项目。设置具有单个数值的相同 flex 简写属性会平均分配所有可用空间，通常使所有 flex 项目的大小相同，只要没有非换行内容强制项目变大。

边距或 gap 属性可用于在项目之间创建间隙，但目前没有 CSS 属性可以在 flex 项目之间添加规则。

要创建具有换行到新行的 flex 项目的布局，请将容器上的 flex-wrap 属性设置为 wrap。请注意，每行 flex 只分配该行的空间。一行中的项目不一定与其他行中的项目对齐，如下面的示例所示。这就是为什么 flexbox 被描述为一维的。它旨在用于控制作为行或列的布局，而不是同时控制两者。

使用 Flexbox

• 用于项目的一行或一列。
• 当您希望在布局项目后在交叉轴上进行对齐时。
• 当您希望换行项目仅沿其行共享空间，而不是与其他行中的项目对齐时。

如果您想要一个二维网格，其中项目需要排列成行和列，那么您应该选择 CSS 网格布局。类似于 flexbox 如何作用于 flex 容器的直接子元素，网格布局作用于网格容器的直接子元素。只需在容器上设置display: grid;。在此容器上设置的属性（例如grid-template-columns 和grid-template-rows）定义了项目如何在行和列中分布。

使用网格

• 用于多行或多列的项目。
• 当您希望能够在块轴和内联轴上对齐项目时。
• 当您希望项目排列成行和列时。

• 多列布局指南
• Flexbox 指南
• CSS 网格布局指南