space-between在最后一行“失灵”是因为flex换行后每行独立计算对齐，最后一行仅在现有子项间分配空间，导致右偏；这是规范行为而非bug。
为什么 space-between 在最后一行会“失灵”
因为 justify-content: space-between 的作用对象是「整条主轴」，而 flex 换行后，每一行都被浏览器当作独立的 flex 行容器来计算对齐。最后一行只有 3 个卡片，它就只在这 3 个之间分剩余空间，不管前几行有没有 5 个——结果就是两端贴边、中间等距，视觉上明显右偏。
这不是 bug，是规范行为。你改 justify-content 值（比如换成 flex-start）会让所有行都左对齐，但你就失去了首行的两端对齐效果。
用 ::after 伪元素动态补位最常用也最可控
核心思路：让容器末尾生成一个或多个不可见占位项，把最后一行“撑满”，使 flex 认为该行已满格，从而让真实卡片自然左对齐。
关键点：
- 必须预设每行最大子项数（比如 4），否则无法算出要补几个
-
::after的flex值要匹配子项宽度逻辑：如果子项用flex: 0 0 24%，那伪元素就得写flex: 0 0 calc(24% + gap)或类似值 - 不能用
visibility: hidden或opacity: 0，这会影响 flex 计算；稳妥做法是height: 0; overflow: hidden; margin: 0; - 响应式场景下，断点变化时必须重置伪元素的
flex-basis，否则小屏补多了会多出空白
示例（每行 4 列，间隙靠 margin 控制）：
.container { display: flex; flex-wrap: wrap; }
.item { flex: 0 0 calc(25% - 10px); margin-right: 10px; }
.item:nth-child(4n) { margin-right: 0; }
.container::after {
content: "";
flex: 0 0 calc(25% - 10px);
height: 0;
overflow: hidden;
}
子项宽度不固定时，别硬套伪元素
当卡片用 %、vw、或 flex-grow 动态伸缩时，伪元素的宽度无法静态匹配，补位会错位甚至溢出。
这时更稳的选择是：
- 换用
display: grid，配合grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))和justify-content: start，天然规避换行对齐问题 - 用 JS 动态计算余数：
const remainder = items.length % columns，然后插入columns - remainder个空<div class="filler"></div>节点 - 放弃
space-between，改用gap+justify-content: flex-start，再靠margin-left: auto给首项“推”到右侧（仅适用于首尾两项有特殊定位需求的极简场景）
最容易被忽略的兼容性坑
::after 在 flex 容器中填充的行为，在 Safari 15.4 之前存在渲染不一致问题：伪元素可能不参与 flex 分配，或高度塌陷导致换行错乱。
如果你必须支持老 Safari，直接跳过伪元素方案。优先验证：
- 目标设备是否真需要
space-between首行效果，还是设计可妥协为全行flex-start+gap - 能否用 Grid 替代——2026 年绝大多数项目已无兼容顾虑
- JS 补节点虽重，但逻辑清晰、100% 可控，比调试伪元素在不同 zoom 级别下的像素偏差更省时间
真正难的不是补几个空格，而是判断哪一行才是“最后一行”——CSS 没有 :last-row 伪类，所有“动态”都是靠数学取模模拟出来的。
