用 column-width 实现自适应列数的关键是设相对单位的最小建议宽度（如12rem或25vw），并确保容器有明确宽度约束；否则浏览器退化为单列，列宽计算失效。
直接说结论：用 column-width 实现“自适应列数”，关键不是设一个固定像素值，而是设一个**相对单位的最小建议宽度**（比如 12rem 或 25vw），并确保容器有明确宽度约束；否则浏览器会退化为单列，且列宽计算完全失效。
为什么 column-width: 200px 在手机上总变回一列
这不是 bug，是规范行为：column-width 是“最小建议宽度”，浏览器会基于它向下取整列数——比如容器宽 480px、column-width: 200px、column-gap: 1rem，实际能塞下的最大列数是 floor(480 / (200 + gap)) = 2；再窄一点（如 370px），就只剩 1 列。视觉上就是“大屏三列→小屏突变一列”，跳变明显。
实操建议：
- 改用相对单位：
column-width: 12rem比200px更适配不同字体缩放和设备；column-width: 25vw能随视口等比缩放，小屏自动收窄列数 - 必须给容器加明确宽度：比如
width: 100vw、max-width: 60ch，或让父容器是display: flex/grid并设了width - 别依赖
max-width: 100%：如果父元素没设宽度，这个声明等于没写，列宽计算直接失效
和 column-count 同时设会发生什么
两者互斥，浏览器必须丢一个：column-count 优先级更高（Chrome、Safari 都按此执行），也就是说你写了 column-width: 140px; column-count: 3;，最终效果就是强制 3 列，column-width 被忽略。
常见错误场景：
- 想“既保证最小列宽，又最多不超过 4 列”，但 CSS columns 不支持这种约束，只能二选一
- 在媒体查询里只改
column-count却保留column-width，结果小屏下仍被column-count锁死列数 - 用简写
columns: 140px 4;，等价于同时设两个属性，一样触发优先级覆盖
移动端文字多列必须加的三件事
纯 column-width 在手机上容易出现断字难读、列间挤在一起、甚至内容溢出等问题。要真正可用，得补这三点：
- 加
break-inside: avoid;到段落或块级子元素上，防止标题、图片被硬生生劈成两半 - 中文必须加
lang="zh"到根元素或容器，并启用hyphens: auto;，否则不会自动断行，长词撑破列宽 -
column-gap也得用相对单位（如1.2rem或3vw），固定20px在小屏上会把列间距撑得比文字还宽
容易被忽略的兼容性细节
column-width 在所有现代浏览器都支持，但有两个隐藏坑点：
- Flex 容器直接套用
columns会失效——因为 flex item 默认不参与多列布局，得额外加align-self: stretch或换用 block 容器 - 不要和
grid/flex混用同一层布局逻辑：columns 是流式分栏机制，和二维布局模型底层冲突，强行组合会导致渲染不稳定或列数随机归零 - 打印样式表里
column-width行为可能和屏幕完全不同，需要单独用@media print重置为column-count: 1
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
