瀑布流布局无法实现“最后一行对齐”，因其本质是列优先、高度驱动的布局，天然无“行”概念；column-count 会留白，grid 瀑布流中 justify-content 不作用于视觉末行，js 库如 masonry 中 item 绝对定位且无 dom 行关系，强行对齐需改用 flex/grid 或视觉补偿。
瀑布流布局本身不支持“最后一行对齐”
瀑布流（Masonry）不是 CSS 原生布局模型，它依赖 JavaScript（如 Masonry.js、CSS column-count 模拟）或现代 display: grid 的 grid-auto-flow: dense 实现。它的核心逻辑是按列“填满高度最低的列”，因此天然不存在“行”的概念——也就没有“最后一行”这个东西。你看到的“最后一行不对齐”，其实是误把多列垂直流当作水平网格在期待对齐。
用 column-count 实现瀑布流时最后一列留白明显
这是 column-count 的固有行为：内容按顺序切分进固定列数，末尾列高度不足时就会空出大量空白，且无法控制单列内元素的水平对齐方式。
- 不要指望
justify-content或text-align对列内块级元素生效——column-count容器不建立 flex/grid 上下文 -
break-inside: avoid可防止元素被拆到不同列，但会加剧末列空白 - 若必须用此方案，可配合
column-fill: balance（默认值）+ 容器设固定高度，让浏览器尽量均衡列高，但依然无法消除末列参差
Grid + grid-auto-flow: dense 无法让“最后一行”居中
很多人尝试用 grid-template-columns: repeat(3, 1fr) 配合 grid-auto-flow: column 模拟瀑布流，再加 justify-content: center，结果发现所有行都居中了，破坏了列优先的瀑布节奏。
-
justify-content控制的是轨道（track）之间的整体对齐，不是单个 item 的位置；瀑布流 Grid 中 item 是按列填充的，所谓“最后一行”只是视觉错觉 -
grid-auto-flow: dense会回填空缺，但不会改变 item 的放置顺序，也无法触发“行级”对齐逻辑 - 真正要解决视觉不齐，得放弃“瀑布流”诉求，改用
display: flex; flex-wrap: wrap+ 显式宽度控制（即传统网格），或接受瀑布流的天然不对齐
JavaScript 瀑布流库（如 Masonry）里“最后一行”根本不存在
像 Masonry 这类库渲染后，每个 item 绝对定位在各自列的底部，DOM 顺序和视觉位置完全解耦。你看到的“最后一排”只是若干列中 y 坐标最接近的最大值，它们之间没有 DOM 关系，也无法统一设置对齐。
- 不要给 item 加
margin-left: auto或justify-self—— 它们会被绝对定位覆盖失效 - 想让末尾几个 item 水平居中？只能手动计算它们的列索引和容器宽度，用 JS 动态调整
left值，但会破坏 Masonry 的重排逻辑 - 更实际的做法：在数据层补足 item 数量（例如后端返回空占位对象），或前端用
padding-bottom+::after在容器底伪造视觉平衡
瀑布流的本质是“列优先、高度驱动”，强行要求“最后一行对齐”等于让水流逆着地势走。真需要严格对齐，请换用 grid 或 flex 网格；如果业务场景确实需要瀑布流（比如图片画廊），就接受它的不对齐特性，或用 padding/伪元素做视觉补偿——别在布局模型上硬拗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
