CSS多列布局按流式切分内容而非等高分配，column-count不保证各列等高；column-gap需兼容前缀与单位限制；hyphens和overflow-wrap控制断词；Flex/Grid会禁用多列，须隔离容器。
column-count 设定列数时，内容不会自动均分
很多人以为设了 column-count: 3，三列就会严格等高，其实 CSS 多列布局是「流式切分」：浏览器按顺序把内容从上到下填满第一列，再填第二列，依此类推。最终各列高度取决于内容断点位置，不是等分容器高度。
这意味着如果某段文字突然变长（比如加了图片或长单词），可能导致最后一列明显矮一截，视觉上不均衡。这不是 bug，是规范行为。
- 若需视觉均衡，得配合
break-inside: avoid防止单个块元素被拆到两列 - 避免在列内用
height或flex布局，它们会干扰列断点计算 -
column-fill: balance（默认值）仅对“容器有固定高度”时生效；无高度限制时它退化为auto，即不强制平衡
column-gap 的单位和兼容性陷阱
column-gap 看似简单，但老项目里常踩两个坑：一是 IE 完全不支持（包括 -ms-column-gap 也无效），二是 Safari 14.0 之前只认 -webkit-column-gap，且不支持百分比值。
目前推荐写法是同时声明标准属性和前缀，并限定使用 px、em 或 rem：
立即学习“前端免费学习笔记（深入）”；
article {
column-count: 3;
-webkit-column-gap: 2rem;
column-gap: 2rem;
}
- 别用
%单位——多数浏览器会忽略，降级为 0 - 若需响应式 gap，可用
clamp()（如column-gap: clamp(1rem, 2vw, 2rem)），但注意 Safari 15.4+ 才稳定支持 - 当父容器用了
transform或will-change，某些 Chrome 版本会错误重置column-gap，临时解法是加translateZ(0)
文字跨列时的 hyphenation 和 break-word 行为
多列下长单词（如 URL、技术术语）容易撑破单列宽度，导致横向滚动或换行异常。CSS 默认不自动连字符，也不强制断词。
- 启用软连字符：加
hyphens: auto，并确保lang属性正确（如lang="zh"对中文无效，但对英文/德文有效） - 中文断行靠
word-break: break-word或更稳妥的overflow-wrap: break-word（注意：后者在 Firefox 中对 inline 元素需配合max-width才生效） -
column-rule画的分隔线不会打断单词，但会穿过滤掉hyphens的连字符位置——这点常被忽略
与 Flex/Grid 混用时的渲染优先级冲突
多列布局（columns）是文本流层的布局机制，而 Flex/Grid 是容器层布局。一旦父容器设了 display: flex 或 grid，子元素的 column-count 就完全失效——因为多列只作用于 block 或 inline-block 流式上下文。
- 想在外层用 Grid 控制区域，内部用多列排文字？必须把多列元素放在独立的 block 容器里，不要让它直接受 Flex/Grid 管控
- 用
display: flow-root包一层可隔离 BFC，避免浮动干扰列断点，但不能恢复多列功能 - Chrome 115+ 开始支持
display: columns（实验性），但它和传统columns属性不互通，目前慎用
真正难调的不是属性本身，而是当列内嵌套了绝对定位、transform 或 CSS 容器查询时，断点计算会悄悄失效，而且几乎不报错——这时候得靠 DevTools 的 Layout 面板逐层关掉样式来定位。
