justify-content: flex-start对末行“没用”是因为它只控制每行子项整体的起始位置，不干预末行内部剩余空间分配；真正需用::after伪元素设flex: 0 0 100%+display: block凑满整行，使浏览器认为该行已满，从而避免右侧悬空。
为什么 justify-content: flex-start 对末行“没用”
它不是失效，而是作用对象错了：justify-content 控制的是**每行内所有子项作为一个整体**在主轴上的起始位置，不干预该行内部剩余空间的分配。当末行只有 2 个子项、容器又很宽时，它们确实从左边排起，但右侧大片空白仍在——视觉上就是“悬空”，不是左对齐。
常见错误是反复改 justify-content 值或加 margin-left: auto 到末项，结果毫无变化。真正要解决的，是让浏览器认为“这行也满了”，从而不给末行额外留白。
::after 伪元素必须设 flex: 0 0 100% + display: block
这是 iOS Safari 15–16 和部分安卓 WebView 中最易失效的点。只写 content: "" 和 width: 100% 不够，伪元素可能被拉伸、不换行、甚至完全不参与布局计算。
-
flex: 0 0 100%明确禁止缩放与增长，宽度严格等于容器内容区宽度 - 必须加
display: block（或display: flex），否则某些引擎忽略flex-basis或width - 别用
height: 0; overflow: hidden替代——它隐藏内容，但不解决换行逻辑 - 绝对不能加
position: absolute，否则脱离 flex 流，彻底失效
响应式下伪元素宽度必须和子项同步重置
子项用 flex-basis: calc(25% - 12px)（4 列），伪元素就得在对应媒体查询里设 flex-basis: calc(25% - 12px)；子项用 width: 20%; margin-right: 10px，伪元素就要 flex-basis: calc(20% + 10px)（注意是加，不是减）。
立即学习“前端免费学习笔记（深入）”；
常见坑：媒体查询里漏掉伪元素重置，小屏下它还按大屏的 flex-basis 占位，导致末行多出一整列空白。
如果子项用了 flex-grow: 1、minmax() 或 JS 动态改宽，伪元素方案会彻底失效——它无法感知真实换行位置，此时应切到 Grid 或 JS 补空节点。
别用 visibility: hidden 或 opacity: 0 隐藏伪元素
这两个属性仍参与 flex 计算，可能导致末行对齐错位，甚至被读屏器误读。
正确做法是让伪元素物理上不占空间但保持 flex 项目身份：
- 设
height: 0; overflow: hidden（主流兼容） - 或
font-size: 0; line-height: 0（兼容老 Safari） - 同时确保
margin-bottom和子项一致，否则行间距错乱——这点在带margin-bottom的列表中几乎必踩
真正容易被忽略的是：伪元素的 margin-bottom 必须和子项完全一致，否则换行后的垂直节奏会断掉。
