justify-content: flex-start对最后一行无效，因其仅控制单行内主轴对齐，不识别“最后一行”；flex-wrap换行后浏览器为每行单独计算剩余空间，未填满时仍按justify-content重新分配，导致居中或右偏。
为什么 justify-content: flex-start 对最后一行没用
这不是你写错了，是 Flex 的设计机制决定的：justify-content 只作用于**单行内**的主轴对齐，它不识别“哪一行是最后一行”。当 flex-wrap: wrap 启用后，浏览器为每一行单独计算剩余空间；最后一行若未填满容器宽度，它的子项仍会按容器级 justify-content 值（如 space-between）重新分配——结果就是居中或右偏，而非左贴边。
直接设 justify-content: flex-start 确实能让每行从左开始排，但前提是子项宽度固定、无拉伸行为。一旦子项用了 flex-grow: 1 或 width: 100%，整行可能被撑满，反而失去“左侧起始”的视觉效果。
::after 伪元素必须设 flex: 0 0 100% + display: block
这是最易踩坑的点：只写 content: "" 和 width: 100% 是不够的。在 iOS Safari 15–16、部分安卓 WebView 中，伪元素会失效——它不换行、不占整行、甚至被拉伸。
-
flex: 0 0 100%明确禁止缩放与增长，让伪元素宽度严格等于容器内容区宽度 - 必须加
display: block（或display: flex），否则渲染引擎可能忽略flex-basis或width - 不能用
height: 0; overflow: hidden替代——它只隐藏内容，不参与 flex 行布局计算 - 别设
visibility: hidden或opacity: 0，这会影响 flex 项计数和空间分配
响应式下伪元素宽度要和子项保持一致
子项用 flex: 0 0 calc(25% - 12px)（4 列），伪元素就得在对应媒体查询里也设 flex-basis: calc(25% - 12px)；子项用 width: 20%; margin-right: 10px，伪元素就要 flex-basis: calc(20% + 10px)（注意是加，不是减）。
常见错误是媒体查询里漏掉伪元素重置：小屏下它还按大屏的 flex-basis 占位，导致最后一行多出一整列空白。
如果子项宽度不固定（比如含 flex-grow、minmax()、或 JS 动态改宽），伪元素方案会彻底失效——它无法感知真实换行位置，此时必须切到 JS 补空节点或换用 Grid。
什么时候该放弃伪元素，改用 margin-right: auto 或 JS
margin-right: auto 只对**最后一个子元素**生效，且仅在它恰好位于最后一行末尾时才起效。一旦响应式列数变化（比如小屏每行 2 个、大屏每行 4 个），:last-child 就不再代表最后一行末尾项。
可行但有限制的做法：
- 用
:nth-child(4n - 1)这类组合伪类精准匹配——但需预知总项数模值，服务端渲染顺序稍有变动就错位 - JS 方案核心是等
DOMContentLoaded+requestAnimationFrame确保尺寸稳定，再遍历比对offsetTop找换行点；补的空节点必须设flex: 0 0 auto; width: 0; height: 0;，否则可能撑开容器
真正难的不是“怎么加占位”，而是判断哪一行是最后一行——CSS 做不到这点，所以所有纯 CSS 方案都依赖列数预设或子项宽度固定。这两条崩了，伪元素就只是障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
