CSS 多列布局
Optional Advanced 刚讲完 图像精灵 — 一张表、许多格子。本课是另一个可选工具：多列。想报纸，不是工具栏。你让 CSS 把长文倒进两三条竖向流。你不是在 Grid 上摆独立卡片。
直接回答
CSS 多列布局把一块流动内容——通常是长文——拆成报纸式栏。你设定栏数（column-count）、舒适栏宽（column-width）、栏距（column-gap）以及可选竖线（column-rule）。文本、列表和行内内容先填第一栏，再填下一栏。用于长文。导航、卡片组和页面骨架仍用 Flexbox 或 Grid，好让每个盒子保持完整。
为什么要有栏
太长的行难读。杂志用一页上几条更短的栏解决。CSS 把这套搬到网页：一个元素、一条文本流、自动折进栏里。这不是 Flexbox（条目的一行或一列），也不是 Grid（区域的二维地图）。多列是碎片化工具——除非你拦住，浏览器可能在栏边界切开段落。
栏数：「我要三栏」
column-count 要一个数字。浏览器把容器宽度分给那么多栏（减去间距）：
.article {
column-count: 3;
max-width: 60rem;
}
宽文章上会看到三道流。窄手机上三道细栏没法读——配媒体查询，或改用 column-width，空间不够时栏数会下降。
栏宽：「每栏大概这么宽」
column-width 是提示，不是锁死的像素笼子。浏览器会尽量做出不窄于该宽度的栏：
.article {
column-width: 16rem;
max-width: 60rem;
}
盒子大约 48rem 加上间距时，可能看到三栏；变窄则两栏、再一栏。通常比每个视口都写死 column-count: 3 更稳。可以两者都设：栏数是上限，宽度是舒适下限。简写 columns 先宽度后栏数，例如 columns: 16rem 3。
间距与线
栏需要透气。column-gap 是栏距。column-rule 在栏距里画细线（宽度、样式、颜色——像边框，但不像盒子边框那样额外占布局空间）：
.article {
column-width: 16rem;
column-gap: 2rem;
column-rule: 1px solid #cbd5e1;
}
还有分项简写（column-rule-width、column-rule-style、column-rule-color）。线要克制：报纸分隔，不是第二套设计系统。
横跨全部栏的标题
标题常常应占全宽，栏从下面开始。子元素上的 column-span: all 就是干这个：
.article h2 {
column-span: all;
margin: 0 0 1rem;
}
.article {
column-count: 2;
column-gap: 1.5rem;
}
日常几乎只用 none 和 all。跨栏给标题、主图或提示框——不是每个段落。
别让盒子被切开
卡片、带说明的 figure、引语若被栏折半，看起来就像坏了。break-inside: avoid 请浏览器尽可能把该盒子留在同一栏：
.article figure,
.article .callout {
break-inside: avoid;
margin: 0 0 1rem;
}
印刷类流程里还有 break-before / break-after；老浏览器可用 page-break-inside: avoid。不是每场都能赢——特别高的盒子仍会溢出——但通常目标是说明跟着图。column-fill: balance（多列里常常是默认）尽量齐栏高；auto 先填第一栏（更像报纸跳转）。
多列 vs Flex vs Grid
📊 Multi-column vs Flex vs Grid
| Tool | Job | Poor fit |
|---|---|---|
Multi-column (column-*) |
Long article, glossary, name list that should read like a newspaper | Card galleries, nav bars, full page shells |
| Flexbox | One-dimensional rows/columns of whole items (toolbar, chips, simple stacks) | Pouring a novel into three text streams |
| Grid | Two-dimensional page or component map (header / main / aside) | Replacing column-count on a <p> soup |
Sprites (background-position) |
Decorative icon tiles on a sheet | Laying out article text |
Flexbox 和 Grid 模块已经教过条目摆放。多列没有 justify-content，也没有命名区域。它灌注一条流。若每个子项必须保持可点的矩形，用 Flex 或 Grid。
页面骨架仍用 Flex 或 Grid
别把整站变成 column-count: 3。页头、导航和卡片组要完整盒子：
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
.prose {
column-width: 18rem;
column-gap: 1.75rem;
}
.prose 可以多列。.card-deck 不该。同一元素上混用会切碎配图，按钮掉进错误的流。
窄屏与阅读顺序
栏会比舒适行宽更窄时（大约 12–16rem 正文），降回一栏。读屏器和键盘仍跟文档顺序，不是视觉上的「先下一栏再下一栏」——文章可以；用栏去假扮互不相关的小组件仪表盘会别扭。RTL 语言里栏按书写模式填充；线仍在栏距里。
自己试
- 把几段放进
.prose，设column-count: 2和column-gap。 - 改成
column-width: 16rem并拖窗口——看栏数变化。 - 加一条安静灰色的
column-rule: 1px solid。 - 给
<h2>写column-span: all。 - 给 figure 加
break-inside: avoid。再把同一套 CSS 套到卡片网格上，就会明白那里 Flex/Grid 更稳。
常见错误
- 把多列当卡片画廊或整页布局
- 手机上强行
column-count: 3，一行只剩三个词 - 忘了
column-gap，栏粘在一起 - 图和说明在栏界被切开
- 把栏当 Flex：文本流没有
flex-grow - 和图像精灵搞混——精灵裁背景；多列切文本
小结
- 多列把一条流动文本倒进报纸栏
column-count是数字；column-width是舒适下限；可以合用column-gap和column-rule装饰栏距；标题用column-span: allbreak-inside: avoid尽量让配图和提示保持完整- 页面骨架和卡片组仍属 Flex 与 Grid
- Optional Advanced 下一课：遮罩（
masking）
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部