justify-content: space-between 会让最后一行右偏，因它按行分配主轴空间，最后一行子项少时首尾被强制撑开；伪元素补位需设 flex: 0 0 100% + display: block 才可靠，且宽度单位须与子项严格一致。
为什么 justify-content: space-between 会让最后一行“飘”在右边
因为 justify-content 作用的是**每一行内部的主轴空间分配逻辑**，不是“最后一行特殊处理”。当最后一行只有 1–2 个子项时，space-between 仍会把首尾项撑开——但尾项后面没东西，结果就是它被推到最右，留出大片空白。这不是 bug，是规范行为。
伪元素 ::after 补位必须设 flex: 0 0 100% + display: block
只写 content: "" 或 flex: auto 不够，尤其在 iOS Safari 15–16 和部分安卓 WebView 中会失效：
-
flex: 0 0 100%禁止缩放和增长，确保它独占整行宽度 - 必须加
display: block，否则某些渲染引擎忽略width或flex-basis - 别用
height: 0; overflow: hidden代替——它不解决换行问题，只藏内容 - 补位后记得配
justify-content: space-between，否则真实子项还是默认左对齐
响应式下伪元素的 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 伪元素方案基本不可靠，该切 JS 或 Grid
更稳的替代：用 margin-right: auto 作用于最后一个子项
这个技巧不依赖列数预设，也不怕响应式变化，但有硬性前提：
- 父容器必须是
display: flex; flex-wrap: wrap - 所有子项不能设
flex: 1或flex-grow: 1，得是flex: 0 0 auto或固定宽 - 只给最后一个子项加
margin-right: auto，它会吃掉右侧所有剩余空间，把前面所有项“挤”到左边 - 注意：如果最后一行不止一个子项（比如 3 个），这个方法只影响最后一个，其余两个仍可能右偏——此时得回退到伪元素或 Grid
真正难的不是写哪一行 CSS，而是判断当前场景能不能预设列数、子项宽是否稳定、要不要支持 IE11 或旧版 WebView。这些细节一错，补位就变成错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
