直接加 justify-content: flex-start 无效，因 flex 多行机制不识别“最后一行”，仅控制每行整体起始位置；::after 伪元素必须设 flex: 0 0 100% + display: block 才能强制换行并精准占位，否则在 ios safari 等环境下失效。
直接加 justify-content: flex-start 没用，因为 Flex 的多行换行机制根本不识别“最后一行”——它对每一行单独计算剩余空间，而 justify-content 只控制整行在容器主轴上的起始位置，不干预该行内部子项的分布逻辑。
为什么 ::after 伪元素必须设 flex: 0 0 100% + display: block
这是最常失效的环节。只写 content: "" 和 width: 100%，在 iOS Safari 15–16、部分安卓 WebView 中，伪元素既不换行，也不占满整行宽度，甚至会被拉伸变形。
-
flex: 0 0 100%明确禁止增长、收缩，让伪元素宽度严格等于容器内容区宽度（不含 padding） - 必须加
display: block（或display: flex），否则某些渲染引擎会忽略flex-basis或width - 不能用
height: 0; overflow: hidden替代——它只隐藏内容，不解决换行参与问题 - 绝不能加
visibility: hidden或opacity: 0，它们仍参与 flex 项计数和空间分配
响应式下伪元素的 flex-basis 怎么同步子项
伪元素不是装饰，它是参与布局计算的“透明子项”，它的尺寸必须和真实子项在当前断点下完全一致（含 margin 补偿）。
- 子项用
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: 1、minmax()或 JS 动态改宽，伪元素方案必然失效——它无法感知真实换行位置
什么时候该放弃伪元素，改用其他方案
伪元素补位是纯 CSS 下最轻量的解法，但适用边界非常明确：固定列数 + 固定子项宽度单位（px/%/vw）+ 所有断点都手动配齐。
- 子项宽度不固定（比如含
flex-grow: 1、minmax(200px, 1fr)）→ 改用display: grid，grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))天然左对齐 - 需要兼容老版 Safari（，按余数补足
- 不想维护多套媒体查询 → 用
margin-right: auto加在.item:last-child上，但前提是子项不能拉伸、且容器没设justify-content: space-between（会冲突） - 伪元素的
margin-bottom必须和子项一致，否则行间距错乱——这点在带margin-bottom的卡片列表中几乎必踩
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
