justify-content: space-between 对末行无效是因为它仅按每行子项总宽与容器宽计算等分空隙，末行子项少导致空隙右堆；伪元素占位需满足：父容器 flex+wrap、content: ""、flex: 0 0 同子项宽。
为什么justify-content: space-between对末行无效
Flex 的 justify-content 作用于**每一行内部**，但不会识别“这是最后一行”。当设为 space-between 时，浏览器只按当前行所有子项总宽 + 容器宽度做等分计算；末行子项少，空隙全堆在右侧，看起来就是右偏——这不是 bug，是 flex 的设计逻辑。
::after 伪元素占位必须满足的三个硬条件
用伪元素假装补满一行，是最轻量的纯 CSS 解法，但以下三点缺一不可：
- 父容器必须声明
display: flex且flex-wrap: wrap，否则伪元素不参与换行计算 -
::after必须有content: ""，否则不渲染、不占布局位置 - 伪元素需设
flex: 0 0，不能写flex: 1或留空，否则会被拉伸变形
子项宽度不固定时，伪元素宽度怎么设
如果子项用 width: 24% 或 flex-basis: 200px，伪元素就得用相同单位。常见错误是写死 flex: 0 0 200px 却忘了响应式场景下小屏子项变窄，导致末行多出空白。
更稳妥的做法：
- 子项用百分比（如
width: calc(25% - 10px)），伪元素也用同样百分比 + 对应 margin 补偿 - 子项用
flex: 0 0 minmax(200px, 1fr)，伪元素就无法精确匹配——此时应改用grid布局 - 移动端必须配合媒体查询重置伪元素宽度，例如
@media (max-width: 768px) { .container::after { flex-basis: calc(50% - 5px); } }
伪元素隐藏方式别用 visibility: hidden
visibility: hidden 和 opacity: 0 仍参与 flex 计算，会导致末行对齐错位。正确做法是让伪元素物理上不占空间但保持 flex 项目身份：
- 设
height: 0+overflow: hidden - 或
font-size: 0+line-height: 0（兼容老 Safari） - 绝对不能加
position: absolute，否则脱离 flex 流，完全失效
真正容易被忽略的是：伪元素的 margin-bottom 必须和子项一致，否则行间距错乱——这点在带 margin-bottom 的列表中几乎必踩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
