column-count 不生效主因是容器未触发多列布局条件：需设 height/max-height 限制高度，确保内容可分段且无 break-inside: avoid 等阻断；同时避免嵌套在 flex/grid 容器内。
column-count 设置列数后内容不按预期分列？检查容器高度和内容可分性
直接设 column-count: 3 不生效，大概率是因为容器没有触发多列布局的必要条件。CSS 多列（columns）本质是「流式分段」，不是网格切割——它需要足够高的内容或明确的高度限制才能产生视觉上的“列”。如果内容过短、容器高度为 auto 且无溢出，浏览器可能只渲染成单列（即使计算上能分，也不强制拆）。
实操建议：
- 给容器加
height或max-height（比如height: 300px），迫使内容在限定空间内分列 - 确保内容是块级流（如
p、div），避免内部元素用了break-inside: avoid或display: inline-block阻断分段 - 慎用
column-fill: balance（默认值），它会在列高差异大时拉长首列；若要等高列，需配合height+column-fill: auto
column-count 和 column-width 同时设置时谁起作用？
column-count 和 column-width 可以共存，但浏览器会优先满足 column-width 的最小宽度要求，再尽可能接近 column-count。例如：column-count: 4; column-width: 200px，当容器宽度不足 800px 时，实际列数会自动减少（比如只剩 3 列），但每列不会窄于 200px（除非容器太窄，此时列宽会被压缩）。
关键点：
- 列宽是「建议值」，不是硬约束；列数是「目标值」，但可被内容/尺寸妥协
- 想严格锁定列数？去掉
column-width，只留column-count+ 显式column-gap - 想控制列宽下限又保列数？用
min-width包裹容器，并结合媒体查询做响应式降级
分列后文字跨列断裂、图片错位？处理 break-inside 和 break-after
默认情况下，段落、列表项、图片都可能被硬生生切开到不同列，造成阅读断裂或布局错乱。这不是 bug，是多列布局的默认行为。
修复方式很直接：
- 阻止块级元素跨列：给子元素加
break-inside: avoid（注意 Safari 旧版需-webkit-column-break-inside: avoid） - 强制某元素独占一列：用
break-before: column或break-after: column - 图片撑满单列？别只设
width: 100%，加上break-inside: avoid，否则可能被截成上下两半 - 注意：
break-inside: avoid对inline元素无效，必须作用于块容器（如figure包裹img）
column-count 在 Flex/Grid 容器里失效？别嵌套错上下文
column-count 只对「块格式化上下文（BFC）」有效。如果父容器是 display: flex 或 display: grid，它的子元素不会进入多列流——因为 Flex/Grid 自己就接管了布局流向。
正确做法：
- 把多列容器作为 Flex/Grid 的一个子项，而不是反过来嵌套
- 不要给多列容器设
display: flex，否则column-count被忽略（Chrome 会警告：Ignoring the 'column-count' property. It only applies to elements with 'display' set to 'block' or 'inline-block'） - 需要在 Grid 中实现类似多列效果？用
grid-template-columns: repeat(3, 1fr)+grid-auto-flow: column，但这是语义不同的布局机制
多列布局真正的复杂点不在写法，而在于它和页面其他机制（如滚动、打印、无障碍读取顺序）的耦合——比如屏幕阅读器仍按 DOM 顺序线性读取，不管视觉上分了几列。这点容易被忽略，但会影响实际交付质量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
