Flex规范不支持按行粒度控制主轴对齐，故justify-content: flex-start对多行容器的最后一行无效；空div比伪元素更可控，因其是真实DOM节点、兼容性更好，且需设flex: 0 0 100%并配合响应式同步宽度。
纯 CSS 无法识别“最后一行”，所以 justify-content: flex-start 对多行 Flex 容器的最后一行完全无效——这不是你写错了，是 Flex 规范本身就不支持按行粒度控制主轴对齐。
为什么空 div 比伪元素 ::after 更可控
空 div 是真实 DOM 节点，参与 flex 排列、可被 JS 动态增删、不受伪元素渲染限制（如 iOS Safari 对 ::after 的 display: block 忽略问题）。尤其当子项宽度不固定（比如用了 flex-grow 或 minmax()），或需要兼容 Safari ≤14.0 时，::after 方案会直接失效，而空 div 仍能稳定占位。
- 空
div必须插入在容器末尾，且不能加visibility: hidden或opacity: 0——它们仍占渲染流，可能被读屏器误读 - 推荐用
width: 0; height: 0; overflow: hidden;隐藏，既不撑开容器，也不触发新换行 - 若子项用
margin-right做间隔，空div不需要模仿该 margin；它只负责“占满剩余空间”，靠flex: 0 0 100%实现
flex: 0 0 100% 是关键，不是 width: 100%
仅设 width: 100% 在部分安卓 WebView 和旧版 Safari 中会被忽略，导致空 div 不换行、不占整行宽度。必须用 flex: 0 0 100% 显式禁止缩放和增长，并让浏览器按容器内容区宽度计算尺寸。
-
flex: 0 0 100%等价于flex-grow: 0; flex-shrink: 0; flex-basis: 100%; - 不要用
flex: auto或flex: 1，否则空div会被拉伸，破坏布局 - 必须配合
display: block（虽然div默认就是，但显式声明可防意外）
响应式下怎么同步空 div 的宽度
每行显示 4 个还是 5 个，取决于屏幕宽度。空 div 的 flex-basis 必须和真实子项一致（含 margin），否则补位错位、最后一行反而多出空白。
立即学习“前端免费学习笔记（深入）”；
- 子项用
flex: 0 0 calc(25% - 12px)（4 列）→ 空div在@media (min-width: 768px)里也设flex-basis: calc(25% - 12px) - 子项用
width: 20%; margin-right: 10px→ 空div要设flex-basis: calc(20% + 10px)（注意：是加，不是减） - 媒体查询里没重置空
div的flex-basis？小屏下它可能还按大屏值占位，导致最后一行空出一整列
JS 动态补空 div 的最小安全实现
真正难的不是“怎么加占位”，而是判断哪一行是最后一行。CSS 做不到这点，所以所有纯 CSS 方案都依赖预设列数或固定子项宽。一旦这两条崩了，就得切到 JS。
- 等
DOMContentLoaded+requestAnimationFrame确保尺寸稳定，再遍历子项比对offsetTop - 补的空
div必须设flex: 0 0 auto和width: 0; height: 0;，否则可能撑开容器或触发新换行 - 别在
resize回调里直接重算——高频触发会导致 layout thrashing，务必节流（如用setTimeout防抖）
空 div 方案的复杂点不在添加动作本身，而在「何时删、何时加、加几个、加多宽」——这些全依赖对当前布局状态的实时感知，而 CSS 无法提供这种感知能力。
