justify-content: space-between 在 flex-wrap: wrap 中对最后一行无效是设计使然，因它按整行分配主轴剩余空间；flex-start 也无效，因它只控制整体起始位置，不干预换行后各行内部对齐；伪元素占位或改用 Grid 是主流解决方案。
justify-content: space-between 在 flex-wrap: wrap 容器中对最后一行无效，这是 Flexbox 的设计逻辑，不是 bug。它把主轴剩余空间一次性分配给整行项目，不按“行”切分；最后一行元素少，右侧空白就悬在那里。
为什么 justify-content: flex-start 也不起作用
它只控制所有子项在主轴上的整体起始位置，不干预换行后各行内部的对齐。一旦换行，浏览器为每行单独计算宽度，但不会重新分配该行内剩余空间——justify-content 对单行内“空余部分怎么分”完全没发言权。
- 实测中，哪怕容器宽度只差 1px，最后一行可能突然居中，行为不可控
-
justify-content: start在 Safari 14.1 以下不支持，旧版需用flex-start - 某些安卓 WebView 对多行
justify-content处理不一致，结果随机
用 ::after 伪元素动态占位（最常用）
核心是让最后一行“看起来”满了，从而让 space-between 不再暴露右空隙。伪元素必须参与 flex 流，且尺寸匹配真实子项。
- 设
.container::after { content: ""; flex: 0 0 calc(25% - 12px); margin-right: 12px; }（假设每行 4 个） - 必须加
display: block或display: flex，否则 iOS Safari 可能忽略宽度 - 不能用
visibility: hidden或opacity: 0，要确保它占布局但不可见；display: none会彻底移出流，占位失效 - 若响应式列数变化（如 4 → 3），需配合媒体查询重置伪元素
flex-basis和margin
改用 Grid 布局（更干净，但有兼容性代价）
Grid 天然支持“每行自动填满、末行左对齐”，无需 hack。关键是用 auto-fill + minmax() 配合 justify-content: space-between（仅影响列间间隙，不影响末行）。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))—— 每列至少 200px，最多均分 -
gap: 12px替代 margin，语义清晰且自动处理末行 - IE11 不支持，Android 4.4 WebView 有部分 bug，生产环境需评估
- 如果必须保留 Flex 语义（比如依赖
align-items垂直对齐），Grid 不是万能替代
真正麻烦的是响应式场景：列数随屏幕变，但伪元素只能靠预设断点硬配。这时候要么接受 Grid 的兼容性妥协，要么用 JS 动态插入占位元素——但后者破坏 CSS 驱动原则，容易引发重排和 SSR 不一致。
