columns属性不生效主因是display类型不支持，仅block、inline-block等有效；flex、grid、table、inline、contents均会使其失效；column-count与column-width共存时优先满足后者；跨栏断裂需用break-inside: avoid控制断点；注意浏览器兼容性及column-gap双前缀写法。
columns 属性不生效？先检查 display 类型
绝大多数情况下 columns 不起作用，是因为元素默认的 display 值不支持多列布局。只有 display: block、display: inline-block 等常规块级行为才有效；display: flex、display: grid、display: table 会直接忽略 columns。
- 确保目标容器没被意外设为
display: flex或display: grid - 如果用了
display: inline，需显式改成display: inline-block才能触发分栏 -
display: contents会让元素“消失”于盒模型，columns完全失效
column-count 和 column-width 冲突时谁说了算？
column-count 是“最多几栏”，column-width 是“每栏最小宽度”，二者同时设置时浏览器会优先满足 column-width，再尽可能塞进 column-count 指定的栏数——但不会强行切出比内容还窄的栏。
- 若容器宽 600px，设
column-width: 200px+column-count: 5，实际只出 3 栏（600 ÷ 200 = 3） - 若容器宽 600px，设
column-width: 350px+column-count: 2，实际只出 1 栏（350 × 2 > 600） - 想严格固定栏数？只设
column-count，删掉column-width
文字跨栏断裂、图片错位？用 column-break-inside 控制断点
默认情况下，浏览器会在任意位置断行分栏，导致段落被劈成两半、图片悬在栏外、表格截断等视觉混乱。关键不是禁用分栏，而是告诉浏览器“哪里不能断”。
- 对不想被切断的块级元素（如
break-inside: avoid（或旧写法column-break-inside: avoid） - 避免在
后立刻断栏：给标题加break-after: avoid - 注意：
break-inside: avoid对inline元素无效，必须作用于块级容器
Chrome/Firefox 表现不一致？留意 column-gap 和兼容性陷阱
column-gap 在 Safari 14.1+ 才支持标准语法，旧版需用 -webkit-column-gap；Firefox 对 break-before/after/inside 的支持更严格，而 Chrome 有时会忽略某些断点规则。
- 必须写双前缀：同时声明
column-gap: 1rem和-webkit-column-gap: 1rem -
column-rule（栏间线）不占空间，但会叠加在column-gap上，别误以为 gap 没生效 - 不要依赖
columns做响应式主布局——它本质是文本流增强，不是栅格系统；复杂结构建议用grid或flex
真正难搞的不是怎么写 columns，而是当内容含浮动、绝对定位、transform 或 overflow hidden 时，栏内流式行为会突然失效——这些情况得逐个测，没法靠一套规则兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
