伪元素补位必须同时满足flex: 0 0 100%、display: block和响应式尺寸同步，缺一不可；否则在ios safari 15–16或部分安卓webview中失效。
伪元素补位不是“加个 ::after 就完事”，它必须同时满足 flex: 0 0 100%、display: block 和响应式尺寸同步，缺一不可——否则在 iOS Safari 15–16 或部分安卓 WebView 中直接失效。
为什么 ::after 单独写 content: "" 不起作用
只写 .container::after { content: ""; }，伪元素默认是 flex: 0 0 auto，既不占满整行，也不阻止缩放，在多数渲染引擎里会被忽略宽度或错误拉伸。尤其当子项用 flex-basis: calc(25% - 12px) 时，伪元素若没显式设宽，浏览器根本不知道该“补哪一段”。
-
flex: 0 0 100%是硬性要求：禁止增长（flex-grow: 0）、禁止收缩（flex-shrink: 0）、基础宽度占满容器主轴 - 必须加
display: block：某些 WebView（如 Android 12+ 系统 WebView）下，不设此值会导致flex-basis被无视 - 别用
visibility: hidden或opacity: 0：它们仍参与 flex 项计数和空间分配，可能引发多占一行
响应式下伪元素的 flex-basis 怎么写才不翻车
伪元素的 flex-basis 必须和真实子项的“单列占用宽度”完全一致——不是子项自身 width，而是它实际占据的横向空间，含 margin。
- 子项写
flex: 0 0 calc(25% - 8px)（4 列），伪元素就得在对应断点里写flex-basis: calc(25% - 8px) - 子项写
width: 20%; margin-right: 10px，伪元素就得是flex-basis: calc(20% + 10px)（注意是加，不是减） - 漏掉媒体查询重置？小屏下伪元素还按大屏的
flex-basis占位，最后一行会多出一整列空白
哪些场景下伪元素方案注定失败
伪元素是静态补位，它无法感知真实换行位置或内容撑开行为。一旦子项宽度不固定，补位就变成错位。
- 子项用了
flex: 1、flex-grow: 1或minmax()—— 宽度由内容或剩余空间决定，伪元素无法匹配 - 子项高度差异大，导致某行提前换行（比如图文混排中带长标题的卡片），伪元素按预设列数补，但实际换行点已偏移
- JS 动态增删子项，且未同步更新伪元素逻辑——
:last-child可能选错节点，::after始终存在，无法动态调整数量
真正难的不是写出那三行 CSS，而是判断当前子项宽度是否稳定、是否允许 JS 干预、以及目标环境是否包含那些对 ::after 在 flex 容器中行为不一致的老 WebView。这些细节一错，补位就变成错位，而且错得毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
