column-count不生效主因是父容器设为flex或grid布局，因多列仅作用于块级流式上下文；必须确保父容器display为block/inline-block，且至少设置column-count或column-width之一。
直接用 column-count 或 column-width，别套 display: flex 或 display: grid —— 后者会让分栏完全失效。
为什么 column-count 不生效？
最常见原因是父容器被设成了 display: flex 或 display: grid。CSS 多列布局只对块级流式容器起作用，而 Flex/Grid 会切换布局上下文，直接屏蔽 column 行为。
- 检查父元素 computed style，确认
display是block、inline-block或未被覆盖的默认值 - 如果用了语义标签如
<main></main>或<article></article>，它们默认就是 block，但若被重置 CSS 强制设成 flex，就废了 -
column-count: 3只是“建议栏数”，实际是否三栏，取决于容器宽度和column-width；设了column-width: 180px后，column-count可能被浏览器忽略
column-width 总是不触发分栏？
column-width 不是“只要写了就分栏”，它需要两个前提：父容器必须有明确宽度（哪怕 width: 100%），且不能是 inline 元素或替换元素（比如 <img>）。
- 确保父容器不是
display: inline或float，否则它不参与块格式化上下文（BFC） - 老项目中可能被 normalize.css 清除了
div的默认 display，加一句display: block显式声明更稳 - 只写
column-gap或column-rule不会触发分栏，必须至少带column-count或column-width
段落、标题这些文本标签怎么避免跨栏断裂？
默认情况下，<p></p>、<h2></h2> 这类块级元素可能被切到不同栏里，阅读体验断层。用 break-inside: avoid 能强制保持完整，但有局限。
- 给
<p></p>加break-inside: avoid，大多数现代浏览器支持；旧版需补-webkit-column-break-inside: avoid和page-break-inside: avoid -
break-inside: avoid对<img>、<iframe></iframe>无效，这类替换元素天生不参与 column 断行控制 - 跨栏标题用
column-span: all，但它要求该元素是display: block，且不能有float或position: absolute
真正容易被忽略的是：分栏不是布局容器，而是文本流重排。你想让三个商品卡片并排？别用 column-count —— 它只管文字怎么折行，不管卡片怎么排列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
