justify-content: space-between 最后一行“悬空”是设计逻辑而非 bug，因每行独立计算间距；::after 伪元素占位（content:""、flex:0 0 100%、margin-left:auto）可解决，需响应式同步重置宽度。
为什么 justify-content: space-between 会让最后一行“悬空”
这不是 bug，是 Flexbox 的设计逻辑：它把每一行当作独立的“行盒”，justify-content: space-between 只在当前行内均分剩余空间。当最后一行元素不足时，浏览器照常在它们之间和两侧插入等距间隙——结果就是右侧大片留白，视觉上像右对齐。
常见错误包括反复调 justify-content、给最后一项加 margin-left: auto（无法可靠识别“哪一个是最后一行第一个”），或用 visibility: hidden 隐藏伪元素（它仍参与 flex 计算，反而干扰间距）。
::after 伪元素占位是最轻量且兼容的解法
核心思路是让 Flex 认为“最后一行也满了”，从而不给它分配额外空隙。关键不是隐藏，而是让它参与布局计算但不可见、不可交互。
- 必须写
content: ""，否则伪元素不渲染 - 推荐用
flex: 0 0 100%或width: 100%，让它独占一行；再配合margin-left: auto推到最右，把真实子项“挤”向左 - 在 iOS Safari 中，仅设
width: 100%不够，必须显式加display: block - 若子项用百分比宽度（如
flex-basis: calc(25% - 8px)），伪元素也要用相同表达式，否则断点错位 - 禁用
visibility: hidden或opacity: 0；稳妥做法是height: 0; overflow: hidden;配合flex: 0 0 0
响应式场景下伪元素宽度必须动态重置
固定宽度的伪元素（如 flex: 0 0 200px）在小屏下会撑出多余空白，破坏换行逻辑。必须随断点同步调整。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询匹配容器断点，重置伪元素的
flex-basis或width - 例如：每行 4 项时子项宽
calc(25% - 12px)，则伪元素也设flex: 0 0 calc(25% - 12px) - 不要依赖 JS 计算宽度——CSS 原生计算更稳定，且避免 FOUC
- 如果使用
gap，注意它不计入子项宽度，伪元素宽度只需匹配子项视觉占用，无需叠加 gap
Grid 是更干净的替代方案，但要注意兼容性边界
如果项目不需要支持旧版 Safari（display: grid 是更自然的选择：它天生二维，justify-content: start 对整块区域有效，不存在“末行特殊处理”问题。
- 用
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))实现流式列数 -
gap直接生效，无需模拟 margin - 旧版 Safari 对
justify-content: start支持差，一律用justify-content: flex-start - Grid 在嵌套深度大或需复杂对齐（如基线对齐）时，调试成本可能高于伪元素方案
真正容易被忽略的是：伪元素必须“参与计算但不占视觉空间”。很多开发者设了 content: "" 和 width: 100% 就以为完事，却忘了 iOS Safari 要 display: block 才触发块级渲染，或者在响应式切换时没重置伪元素宽度，导致小屏下多出一整行空白。
