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。
什么时候该放弃伪元素，改用 JS 补空 <div>
margin-right: auto 只对**最后一个子元素**生效，且仅在它恰好位于最后一行末尾时才起效。一旦响应式列数变化（比如小屏每行 2 个、大屏每行 4 个），:last-child 就不再代表最后一行末尾项。
可行但有限制的做法：:nth-child(4n - 1) 这类组合伪类能精准匹配，但维护成本高、逻辑脆弱。
更稳的替代方案是 JS 动态补空节点：算出当前容器宽度下每行能容几个子项，再根据总数量取余，插入对应个数的空 <div class="spacer"></div>。尤其适合子项宽度动态变化、或需兼容老版 Safari（::after 在 flex 容器中行为不一）的场景。
伪元素看似轻量，但它依赖静态宽度推算；JS 补空虽增了 DOM 节点，却真正响应布局状态——这点在复杂响应式卡片流或后台管理界面中尤为关键。
