列布局 - CSS：层叠样式表 | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
View in English Always switch to English
你经常需要创建具有多列的布局，而 CSS 提供了多种方法来实现这一目的。使用多列、弹性盒还是使用网格布局，取决于你想要实现的目标，在本指南中，我们将探讨这些选项。
为了达到你的需求，你需要选择不同的布局方式。
如果你使用多列布局来创建列，则文本会以连续流的形式依次填满每个列。这些列必须大小相同，并且你不能单独指定列或者列的内容的样式。
你可以使用 column-gap 或 gap 属性控制列之间的距离，并且使用 column-rule 为列之间添加分割线。
通过设置 display: flex;，使父元素成为一个弹性容器，就可以使用弹性盒布局法将内容分成几列。只需添加这一个属性，就能将所有子元素（子元素、伪元素和文本节点）变成单行的弹性项。用单一数值设置相同的 flex 简写属性，可以平均分配所有可用空间，一般来说，只要没有非包裹内容迫使项目变大，所有弹性项目的大小都是一样的。
外边距或 gap 属性可用于在项目之间创建间隙，但目前还没有在弹性项目之间添加分割线的 CSS 属性。
要创建一个布局，其中的弹性项可以换行，请将容器上的 flex-wrap 属性设置为 wrap。请注意，每个弹性行只为该行分配空间。一行中的项目不一定会与其他行中的项目对齐，正如你在下面的示例中看到的那样。这就是为什么弹性盒布局被描述为一维布局法的原因。它设计用于控制一行或一列的布局，但不能同时控制这两种布局。
如果你想要一个二维网格，让项目按行和列排列，那么你应该选择 CSS 网格布局。与弹性盒适用于弹性容器的直接子代类似，网格布局也适用于网格容器的直接子代。只需在容器上设置 display: grid; 即可。在该容器上设置的属性，如 grid-template-columns 和 grid-template-rows——定义了项目如何沿行和列分布。
此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。
本内容的部分版权归 mozilla.org 贡献者所有，©1998–2026。内容依据知识共享许可协议提供。