justify-content: space-between 无法实现最后一行左对齐，因其按每行内部均分剩余空间，末行子项少时右侧留白；需用伪元素补位，设 flex: 0 0 100% + display: block，并确保宽度单位与子项严格一致。
justify-content: space-between 本身做不到“最后一行靠左”，它只管每行内部的间隙分配，最后一行子项少时，右侧空白会被撑开——这不是 bug，是规范行为。
伪元素补位必须设 flex: 0 0 100% + display: block
只写 ::after { content: "" } 或 flex: auto 不够，尤其在 iOS Safari 15–16 和部分安卓 WebView 中会失效：
-
flex: 0 0 100%禁止缩放和增长，确保它独占整行宽度 - 必须加
display: block，否则某些渲染引擎忽略width或flex-basis - 别用
height: 0; overflow: hidden代替——它不解决换行问题，只藏内容
响应式下伪元素的 flex-basis 必须和子项完全一致
子项怎么算宽，伪元素就得怎么算宽，差一点都会错位：
- 子项用
flex: 0 0 calc(25% - 12px)（4 列），伪元素在@media (min-width: 768px)里也要写flex-basis: calc(25% - 12px) - 子项用
width: 20%; margin-right: 10px，伪元素就得是flex-basis: calc(20% + 10px)（注意是加，不是减） - 如果子项宽度不固定（比如内容撑开、
flex: 1），纯 CSS 伪元素方案基本不可靠
margin-right: auto 只作用于真实末项，且和 justify-content 冲突
这个技巧不依赖列数预设，但有硬性前提：
- 父容器必须是
display: flex; flex-wrap: wrap - 所有子项不能设
flex: 1或flex-grow: 1，得是flex: 0 0 auto或固定宽 - 只给最后一个子项加
margin-right: auto，它会吃掉右侧所有剩余空间，把前面所有项“挤”到左边 - 如果用了
justify-content: space-between，margin-right: auto会被直接忽略——前者优先级更高
真正难的不是写哪一行 CSS，而是判断当前场景能不能预设列数、子项宽是否稳定、要不要支持旧版 WebView。这些细节一错，补位就变成错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
