伪元素 ::after 必须设 flex: 0 0 100% 并加 display: block，才能强制换行、挤正最后一行左对齐；响应式需同步子项与伪元素的 flex-basis；子项宽度不固定时应改用 js 补空节点。
直接加 justify-content: flex-start 无效，最后一行依然右偏或居中——这不是你写错了，是 Flex 多行时根本不管“最后一行”这回事。
为什么伪元素 ::after 必须设 flex: 0 0 100%
因为只有这样它才会强制换行、独占一行宽度，把最后一行真实子项“挤”到最左侧。如果只写 flex: auto 或 width: 100% 不配 display: block，在 iOS Safari 15–16 和部分安卓 WebView 中会失效——伪元素不换行，还可能被拉伸。
-
flex: 0 0 100%明确禁止缩放和增长，宽度按容器内容区 100% 计算 - 必须额外加
display: block到::after，否则width或flex-basis在某些渲染引擎里被忽略 - 不要用
height: 0; overflow: hidden代替，它只隐藏内容，不解决换行逻辑问题
响应式下怎么让伪元素宽度随列数变化
每行显示 4 个还是 5 个，取决于屏幕宽度。伪元素的 flex-basis 必须和真实子项一致（含 margin），否则补位错位、最后一行反而多出空白。
- 子项用
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)才对齐（注意：是加，不是减） - 媒体查询里没重置伪元素宽度？小屏下它可能还按大屏值占位，导致最后一行空出一整列
什么时候该放弃伪元素，改用 JS 补空节点
当子项宽度不固定（比如用了 flex-grow、minmax() 或 JS 动态改宽），或者需要兼容 Safari ≤14.0 时，CSS 伪元素方案会彻底失效——它无法感知真实换行位置。
- JS 方案核心：等
DOMContentLoaded+requestAnimationFrame确保尺寸稳定，再遍历子项比对offsetTop - 补的空节点必须设
flex: 0 0 auto和width: 0; height: 0;，否则可能撑开容器或触发新换行 - 别在
resize回调里直接重算——高频触发会导致 layout thrashing，务必节流
真正难的不是“怎么加占位”，而是判断哪一行是最后一行；CSS 做不到这点，所以所有纯 CSS 方案都依赖预设列数或固定子项宽。一旦这两条崩了，就得切到 JS 或换 Grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
