column-fill: balance 仅在父容器设置 height 或 max-height 时生效，否则退为 auto 模式；safari 对多列 balance 支持较保守，需固定内容与高度测试；column-width 优先于 column-count，临界宽度易致列数跳变。

column-fill 的默认行为就是“自动填满第一列再填第二列”，不是按行均衡分布——想让多列高度接近一致，必须显式设为 column-fill: balance，否则在内容不均或容器高度受限时，会出现明显列长差异。

为什么设置了 column-fill: balance 还没效果？

常见原因是父容器没设 height 或 max-height。CSS 多列布局中，balance 只在**有明确块轴约束**（即高度已知）时才生效；若容器高度由内容撑开（height: auto），浏览器直接走 auto 模式，忽略 balance。

• 必须给多列容器设置具体高度，例如：height: 300px 或 max-height: 400px
• 不要依赖 min-height —— 它不触发平衡计算
• Flex/Grid 容器内部的多列元素，需确保该元素自身是块级且高度可计算

column-fill: balance 在不同浏览器中的兼容性差异

Chrome 50+、Firefox 13+、Safari 10.1+ 支持，但 Safari 对 balance 的实现偏保守：当列数 > 2 且内容量较小时，可能仍退回到 auto 行为，尤其在缩放或动态加载内容后。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 测试时用固定内容 + 显式 height 排查，避免被响应式变化干扰
• Edge 已随 Chromium 内核统一，无需单独处理；旧版 IE 完全不支持 column-fill
• 如需强一致性，可用 JavaScript 检测 getComputedStyle(el).columnFill 并 fallback 到 JS 分割逻辑

和 column-count / column-width 配合使用的注意点

column-fill 不影响列数生成逻辑，但它会改变内容在已有列中的分配策略。如果同时用了 column-width 和 column-count，优先级以 column-width 为准，列数可能动态变化——此时 balance 会在最终确定的列数上做高度均衡。

• 避免同时指定 column-count: 3 和 column-width: 200px 且容器宽度刚好卡在临界值（如 599px），可能导致列数跳变，balance 结果不稳定
• 移动端小屏下 column-width 易触发单列，balance 失效——建议用媒体查询关闭多列或改用 Grid
• break-inside: avoid 会阻止段落跨列，可能破坏 balance 效果，需权衡可读性与均衡性

真正容易被忽略的是：哪怕写了 column-fill: balance，只要容器没有「可测量的高度边界」，它就形同虚设——这不是 bug，是规范定义的行为。调试时先检查 computed height，再看 fill 值是否生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！