column-count在移动端不生效是因为它专为长文本流式分栏设计，对块级子元素默认撑满单栏；需设子元素为inline-block或配合响应式断点与column-gap优化。
column-count 为什么在移动端不生效
因为 column-count 是为长文本分栏设计的，不是网格布局工具。它只对块级容器内连续流式内容（比如 <p>、<div> 里没换行的纯文字或内联元素）起作用；遇到 <div> 块级子元素，默认会被强制“撑满一栏”，实际还是单列。
- 常见错误现象：
column-count: 3写了但页面始终显示一列，检查子元素是否都是display: block - 解决办法：给子元素加
display: inline-block或display: inline，或者用break-inside: avoid控制断行位置 - 移动端需配合
column-gap和column-rule调整视觉间隔，否则窄屏下栏间距过小，文字挤在一起
和 CSS Grid / Flexbox 的关键区别在哪
column-count 不控制子项顺序、对齐或尺寸，只按内容高度自动平衡分栏。Grid 和 Flex 是基于“项”的布局，column 是基于“内容流”的布局。
- 使用场景：适合新闻摘要、博客标签云、长列表文字（如法规条文）——内容天然可打断、无需精确对齐
- 参数差异：
column-width是建议值，浏览器会尽量接近但可能调整；column-count是硬性分割数，但最终栏数仍受容器宽度和内容长度制约 - 性能影响：比 Grid 轻量，无重排压力；但内容动态增删时，各栏高度重平衡可能引发小幅重绘
响应式切换 column-count 的可靠写法
别只靠 max-width 媒体查询硬切数字，要预留“退化路径”——当屏幕太窄或内容太少时，让栏数自然降为 1，避免出现超窄栏或空白栏。
- 推荐写法：
article { column-count: 1; } @media (min-width: 768px) { article { column-count: 2; } } @media (min-width: 1024px) { article { column-count: 3; } } - 容易踩的坑：在
column-count: 3下塞少于 3 行文字，结果三栏里只有第一栏有内容，后两栏空着——这不是 bug，是规范行为 - 兼容性注意：IE10+ 支持，但 Safari 旧版本对
break-inside支持弱，必要时用-webkit-column-break-inside: avoid
column-fill: balance 的实际效果很有限
这个属性本意是让各栏高度尽量一致，但只在内容能自然断开的位置生效（比如段落之间），对单个长 <div> 或图片无效。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：设置了
column-fill: balance但最后一栏明显更短——大概率是因为中间某个子元素用了break-inside: avoid或本身不可分页 - 真正可控的平衡手段只有两个：控制内容长度（比如限制每项字符数）、或改用 JavaScript 拆分内容后手动注入各栏
- 别依赖它做“等高卡片”效果，那是 Grid 的活儿
