不能靠 justify-content: space-between 单独实现最后一行对齐，必须配合伪元素占位或动态 margin；因其按每行独立计算，最后一行子项少会导致右端空白，伪元素补位或改用 CSS Grid 更可靠。
直接结论：不能靠 justify-content: space-between 单独实现，必须配合伪元素占位或动态 margin 控制；否则最后一行永远会被拉成两端对齐。
为什么 justify-content: space-between 会让最后一行“发疯”
它不是按“整个容器”分配空间，而是按“每一行”独立计算。最后一行只有 3 个子项，浏览器就把它当新行处理：第一项贴左、最后一项贴右、中间空隙均分——结果就是右边凭空多出大段空白，和设计稿完全对不上。
常见错误是反复调 justify-content 或给 :last-child 加 margin-left: auto，但这些都无效，因为：
-
justify-content对单行内对齐无控制力 -
margin-left: auto作用对象是“第一个子项”，而最后一行的第一个项无法用纯 CSS 稳定定位
margin-right: auto 加在 :last-child 上为什么有时有效、有时失效
它只在满足三个硬条件时才起效：
- 父容器必须有
display: flex和flex-wrap: wrap - 子项不能设
flex: 1、flex-grow: 1或width: 100%，否则会抢走剩余空间 -
margin-right: auto必须加在**真实最后一个子元素**上，不是伪元素，也不是 JS 插入的空节点
响应式场景下极易失效：比如小屏每行 2 个、大屏每行 4 个，:last-child 可能落在倒数第二行末尾，导致错位。此时必须配合 :nth-child(4n - 1) 这类数学选择器，或改用 JS 动态打标。
用 ::after 伪元素补位才是最稳的方案
核心是让最后一行“看起来满员”，从而让 space-between 不暴露空隙。关键细节：
- 伪元素必须设
flex: 0 0 auto（或匹配子项宽度，如flex: 0 0 200px），不能用visibility: hidden或opacity: 0，否则会影响 flex 计算 - 更稳妥写法是
height: 0; overflow: hidden;配合flex: 0 0 0 - 子项若用百分比宽度（如
width: 33.33%），伪元素也得用相同单位，否则断点切换时对不齐 - 移动端必须用媒体查询重置伪元素宽度，否则小屏下可能多出一整列空白
真正该放弃 flex 的时候
当列数不固定、子项宽度不一致、或需要频繁增删数据时，flex 的“行级自治”机制会让所有纯 CSS 方案变得脆弱。这时候直接切到 grid：
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) ); gap: 12px; }
grid 天然按列填充，不存在“最后一行对齐”问题——它根本不生成“行”的概念，只是把子项塞进可用列格里。如果你还在为 flex-wrap 的换行行为调试半天，大概率该换布局模型了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
