column-count 不生效主因是容器宽度不足或与 column-width 冲突；二者共存时浏览器优先满足 column-width 并以 column-count 为上限；flex/grid 父容器中 column 属性完全失效，需嵌套 wrapper；列宽非精确值，受容器尺寸向上取整；内容断行需组合 break-inside、orphans/widows 控制。
column-count 设了却不生效？先看容器宽度和 column-width 冲突没
直接写 column-count: 4 却只显示 2 列，不是 CSS 写错了，而是浏览器在“权衡”：它默认要求每列至少约 250px 宽（取决于 UA 样式和字体渲染），如果容器总宽不到 1000px，就不可能撑出 4 列。
更关键的是：column-count 和 column-width 同时存在时，浏览器优先满足 column-width——它会先按你设的列宽尝试分栏，再用 column-count 限制“最多几列”，而不是“必须几列”。
- 只设
column-count: 4→ 列数固定为 4，但每列宽度随容器缩放（可能窄到文字挤成一团） - 只设
column-width: 180px→ 列数由容器宽度动态决定（比如容器宽500px就出 2 列，700px就出 3 列） - 两个都设 → 浏览器取交集：列宽 ≥
180px的前提下，最多不超过 4 列；若容器太窄，可能只出 2 列甚至 1 列
column-width 是“最小宽度”，不是“精确宽度”
column-width 的值是建议性最小宽度，浏览器会向上取整到能整除容器宽度的最接近值。比如设 column-width: 150px，容器宽 480px，实际每列可能被算成 160px（3 列 × 160px = 480px），而不是死守 150px。
这意味着：如果你依赖列宽做对齐或与其它元素（如图片、按钮）尺寸匹配，仅靠 column-width 不可靠；需要配合明确的父容器 width 或用 columns 简写控制上下限。
- 父容器没设
width（比如width: auto或在 flex/grid 项里），column-width可能完全不触发分栏 - 想让列宽尽量稳定？加
width: fit-content或固定值，并确保容器不被弹性布局压缩 - 打印样式中
column-width表现更一致，但屏幕端受缩放、DPR、字体度量影响大
Flex/Grid 容器里 column-count 直接失效
这是最容易踩的坑：column-count 只对普通块级流（display: block）生效。一旦父容器是 display: flex 或 display: grid，多列布局就彻底不工作——子元素会被 flex/grid 规则接管，column- 系列属性被忽略。
解决办法不是“强行加”，而是结构上隔离：
- 在 flex/grid 项内部，再包一层
<div class="columns-wrapper">，并在该 wrapper 上设 <code>column-count - 改用
display: grid+grid-template-columns: repeat(3, 1fr)模拟多列，但注意这改变流向逻辑（grid 是横向填满再换行，column 是纵向填满再换列） - 确认是否真需要 column 布局：列表项高度差异大、内容自然分段（如新闻正文、词典条目）才适合；纯 UI 卡片推荐 Grid/Flex
-
break-inside: avoid必须加在要保护的子元素上（如每个<div class="item">），不能只加在容器上 <li>若子元素含内联内容（如图片+文字混排），还需加 <code>break-inside: avoid-column（部分旧浏览器不支持） - 长段落仍可能断开？补上
orphans: 3; widows: 3控制段首段尾最少行数 - 慎用
column-fill: balance（默认值）：它会让浏览器强制拉平各列高度，反而导致顶部大片留白；对短内容可试column-fill: auto
内容断行难控？break-inside: avoid 不够用
默认情况下，浏览器会把段落、列表项甚至单个 <p></p> 拆开跨列显示，阅读体验割裂。加 break-inside: avoid 能阻止元素被拆，但仅对“可分页/分栏”的块级元素有效，且有兼容性陷阱。
真正要稳住布局，得组合控制：
column-count 和 column-width 看似简单，但实际生效高度依赖容器上下文、UA 默认行为和内容结构。最常被忽略的是：它们不是独立开关，而是一组协商机制——浏览器永远在“列数”“列宽”“容器尺寸”“内容长度”之间找平衡点，你只能引导，不能强求。
