justify-content: space-between 本就不处理最后一行左对齐，它按每行子项数均分主轴剩余空间，导致最后一行子项少时右侧留白；margin-right: auto 需满足父容器 flex-wrap: wrap、子项无 flex-grow: 1、且必须作用于真实末项；伪元素补位须设 flex: 0 0 100% 和 display: block，响应式下宽度须与子项严格同步，否则错位；子项宽度不固定时推荐改用 grid 布局。
justify-content: space-between 本身就没打算管最后一行是否“左对齐”——它只按每行子项数量均分主轴剩余空间，最后一行子项少，空隙全堆右边，这是规范行为，不是 bug。
为什么 margin-right: auto 在最后一项上经常失效
它看起来最轻量，但实际生效条件极苛刻：
- 父容器必须同时声明
display: flex和flex-wrap: wrap，缺一不可 - 所有子项不能有
flex: 1、flex-grow: 1或width: 100%，否则它们会抢占空间，margin-right: auto直接被忽略 - 必须加在 DOM 中真实的最后一个子元素上，比如
.item:last-child；伪元素或 JS 动态插入的节点不适用 - 如果最后一行有多个子项（如 3 个），它只作用于第 3 个，前两个仍可能右偏——此时该方案已失效
::after 伪元素补位的硬性要求
这是纯 CSS 下最可控的方案，但 Safari 15–16、部分安卓 WebView 会直接忽略不合规写法：
- 必须写
content: ""，否则不渲染、不参与布局 - 必须设
flex: 0 0 100%（禁止缩放与增长），不能简写为flex: auto或留空 - 必须加
display: block或display: flex，否则flex-basis在某些引擎中完全不生效 - 响应式下，伪元素的
flex-basis必须和子项严格同步：子项用flex: 0 0 calc(25% - 12px)，伪元素就得在对应@media里写flex-basis: calc(25% - 12px)
子项宽度不固定时，别硬扛伪元素
一旦子项用了 flex-grow: 1、minmax()、内容撑开、或 JS 动态改宽，伪元素就无法预知换行位置，补位必然错乱：
- 常见错误是写死
flex: 0 0 200px，却忘了小屏下子项变窄，导致末行多出一整列空白 - 更隐蔽的坑是伪元素的
margin-bottom没和子项保持一致，行间距直接错位 - 此时应切到
display: grid：用grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))+justify-content: start，天然规避换行对齐问题
真正容易被忽略的是：你得先判断子项宽度是否稳定、是否允许预设列数、是否要兼容旧版 WebView——这些前提没理清，补位逻辑再漂亮，也只会变成错位逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
