justify-content: flex-start 无法解决最后一行左对齐问题，因其仅控制每行子项整体位置，不改变末行剩余空间；真正有效的是用伪元素占位，需同时满足 display: block、flex: 0 0 100%、content: "" 三项。
直接加 justify-content: flex-start 不能解决最后一行左对齐——它确实让每行从左开始排，但不阻止末行右侧留白；真正起效的是让 Flex 认为“这行也满了”，靠占位，不是靠对齐。
为什么 justify-content: flex-start 对最后一行“没用”
这不是写错了，是 Flex 的计算逻辑决定的：justify-content 控制的是**每行所有子项作为一个整体**在主轴上的位置，不是控制“这一行还剩多少空”。当 flex-wrap: wrap 启用后，浏览器为每一行单独分配剩余空间。最后一行若只有 2 个子项，而容器宽远大于它们总宽，那这 2 个仍会按整行宽度做间距分配（尤其配合 gap 或 margin-right 时），视觉上就悬在左边、右边大片空白。
常见错误现象：
- 加了
justify-content: flex-start，末行项目贴左了，但右侧空一大截，看起来像没对齐 - 用了
justify-content: space-between，末行直接两端撑开，完全违背设计意图 - 旧版 Safari 渲染异常，
justify-content: start不生效，必须用flex-start
::after 伪元素占位必须写全这三项
只写 content: "" 和 width: 100% 是不够的。iOS Safari 15–16、部分安卓 WebView 会忽略它，导致占位失败。
- 必须设
display: block（或display: flex）——否则flex-basis或width可能被渲染引擎跳过 - 必须设
flex: 0 0 100%——明确禁止缩放与增长，宽度严格等于容器内容区宽度；用flex: auto或flex-grow: 1会导致它抢空间、拉伸真实子项 - 必须设
content: ""——空字符串是触发伪元素渲染的前提，缺了它整个方案失效
错误写法示例：
.container::after { content: ""; width: 100%; }→ 在 Safari 中不换行、不占位、不起作用。响应式下伪元素宽度必须和子项同步重置
子项在不同断点用不同 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-grow: 1、minmax() 或 JS 动态改宽）时，伪元素方案彻底失效——它无法感知真实换行位置。
什么时候该放弃伪元素，换方案
伪元素方案轻量、干净，但依赖两个硬前提：列数固定、子项宽度可预测。一旦这两个崩了，就得切。
- 列数不固定（比如用
auto-fit+minmax()做响应式栅格），优先换display: grid：justify-content: start天然支持末行左对齐，无兼容陷阱 - 子项宽度动态变化（JS 调整尺寸、动画中重排），必须用 JS 补空节点：等
DOMContentLoaded+requestAnimationFrame确保尺寸稳定，再遍历比对offsetTop找末行，插入flex: 0 0 auto; width: 0; height: 0;的空<div> <li>需要兼容 Safari ≤14.0，伪元素在部分版本中对 <code>flex: 0 0 100%支持不稳定，建议降级用真实空元素或 Grid
真正难的不是“怎么加占位”，而是判断哪一行是最后一行——CSS 做不到这点，所以所有纯 CSS 方案都绕不开预设或假设。
