真正让 Flex 多行容器末行左贴边的是伪元素方案：需设 display: block 和 flex: 0 0 100% 使其作为真实 flex 项参与换行计算，否则在 iOS Safari 等环境失效。
justify-content: flex-start 对 Flex 多行容器的最后一行“看似有效”，实则不可靠——它只控制每行内部子项的起始位置，但无法干预最后一行右侧剩余空间的分配逻辑。真正让末行“稳稳左贴边”的，是用伪元素主动参与换行计算。
为什么 ::after 伪元素必须设 display: block 和 flex: 0 0 100%
很多开发者只写 content: "" 和 width: 100%，结果在 iOS Safari 15–16 或部分安卓 WebView 中完全失效。原因在于伪元素默认是 display: inline，width 不生效；而 flex: 0 0 100% 明确锁定基础宽度、禁止缩放与增长，再配合 display: block（或 display: flex），才能让它被当作一个真实、可换行的 flex 项参与布局计算。
-
display: block是硬性前提，缺一不可 -
flex: 0 0 100%比flex-grow: 1更可控——后者在某些 Safari 版本中会意外拉伸整行 - 不能用
visibility: hidden或opacity: 0，它们会影响 flex 项计数和空间分配
响应式下伪元素的 flex-basis 必须同步重置
如果子项用的是 flex: 0 0 calc(25% - 12px)（4 列），伪元素在小屏媒体查询里也得设成 flex: 0 0 calc(50% - 12px)（2 列）。常见错误是漏掉这步，导致伪元素仍按大屏宽度占位，末行多出一整列空白，甚至触发多余换行。
- 子项用
margin-right: 10px，伪元素的flex-basis要加回这个值（如calc(50% + 10px)） - 子项含
gap时，伪元素无需额外处理——gap不作用于伪元素 - 用
minmax()或flex-grow的子项会让伪元素方案彻底失效，此时应切 Grid
伪元素方案不适用于动态宽度或 JS 驱动的列表
当子项宽度由 JS 动态设置、或依赖内容高度自适应（如 flex: 1 + 文字流撑高）、或使用 minmax(200px, 1fr) 时，伪元素无法感知真实换行点，占位宽度永远是静态预设值，极易错位。这时候别硬扛 CSS，直接用 JS 计算缺失个数，插入真实 更稳妥。
- JS 补空节点要确保和子项同级、同
box-sizing、同margin，否则对齐偏移 - 伪元素无法匹配
:nth-child(4n - 1)这类动态定位，纯 CSS 下它永远只是“最后一个占位符” - 若项目需兼容 IE11，伪元素方案仍可用，但得避开
gap和flex: 0 0 100%，改用width: 100%+display: block
最易被忽略的一点：伪元素不是“透明补丁”，它是参与 flex 布局的真实一员。它的存在会改变行高计算、影响 align-content 行间距、甚至干扰 scroll-snap 定位——上线前务必在真机上验证滚动与交互是否正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
