column-count配合媒体查询是瀑布流最稳方案：小屏设1列、中屏2列、大屏3–4列，需加column-gap和break-inside: avoid防卡片截断，column-width虽可自适应但Safari兼容差且需兜底。
用 column-count + 媒体查询做响应式列数切换
纯 CSS 实现瀑布流最稳的路径就是 column-count，但它本身不自适应——列数写死就无法适配不同屏幕。真正起作用的是配合媒体查询动态改列数。
常见错误是只写一个固定值，比如 column-count: 3，结果在手机上挤成窄条、在大屏上又太稀疏。
- 小屏（
max-width: 480px）设为column-count: 1 - 中屏（
481px–768px）设为column-count: 2 - 桌面（
769px+）设为column-count: 3或4，视内容密度而定 - 别忘了加
column-gap控制间距，单位推荐用rem或vw，避免小屏下间隙过大
break-inside: avoid 必须加在子项上，否则图片/卡片会被截断
这是瀑布流渲染最常翻车的地方：明明写了 column-count，但某张图片被硬生生从中间劈开，一半在第一列、一半在第二列。
根本原因是浏览器默认允许内容跨列分页，而图片、div 这类块级元素没有显式声明“不可分割”。
- 必须给每个瀑布流子项（如
.masonry-item）加上break-inside: avoid - 某些旧版 Safari 需要补
-webkit-column-break-inside: avoid - 如果子项内含
position: absolute元素，break-inside可能失效，此时需包裹一层干净的div
用 column-width 替代 column-count 更适合“宽度驱动”的场景
当你的卡片宽度相对固定（比如统一宽 280px），而希望列数随容器自动伸缩时，column-width 比 column-count 更自然。
它不是强制列数，而是告诉浏览器：“每列尽量保持这个宽度”，然后由浏览器自己算出能塞几列。实际效果更接近“弹性栅格”。
- 写法：
column-width: 280px，同时可配column-gap: 1rem - 注意：它和
column-count互斥，同时存在时column-count会优先生效 - 在小屏下，
column-width可能导致列数骤减甚至归零（比如容器宽仅 250px），所以仍建议用媒体查询兜底 - Chrome 和 Firefox 支持良好；Safari 15.4+ 才完全修复了
column-width在 flex 容器内的兼容问题
Flexbox 方案看似灵活，但真做“高度错落”其实很吃力
有人尝试用 display: flex; flex-wrap: wrap 模拟瀑布流，再靠 flex-basis 控制每项宽度。这能实现“多行等宽排列”，但不是真正的瀑布流——所有行高由最高项决定，无法形成参差错落的视觉效果。
除非你手动计算每列累积高度并 JS 分发元素（即 Masonry 逻辑），否则纯 Flexbox 只能做出“伪瀑布流”。
- 如果坚持用 Flexbox，至少加
gap: 1rem替代 margin，避免塌陷 -
flex: 1 0 calc(33.333% - 1rem)这类写法在小屏下容易溢出，务必加min-width限制（如min-width: 240px） - 真正需要 Masonry 效果（按列高排序插入）的场景，CSS 目前无解，必须用 JS 库（如
css-grid的masonry值仍在实验阶段，grid-template-rows: masonry尚未进入主流支持）
真正难的不是写对那几行 CSS，而是理解 column-count 的渲染顺序：它是按文档流“从上到下填满一列，再填下一列”，所以时间序数据会左右分叉。如果业务要求严格保序（新内容总在右侧追加），就得放弃纯 CSS，转向 JS 分列方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
