space-between最后一行不左对齐是正常行为；伪元素法常因数量固定、宽度不一致而失效；推荐flex-start+负边距或grid替代，js补位仅限必要场景。
justify-content: space-between 在最后一行元素不足时，会让首尾元素贴边、中间留白——这不是 bug，是它本意：它只对当前行所有子项整体做主轴分配，不会为“最后一行”单独重算。想让它视觉上左对齐，得绕过这个逻辑。
为什么伪元素占位法常失效？
很多人直接抄 ::after 补一个占位，结果没用。原因很实在：
-
::after和::before是单个伪元素，最多补 2 个，但一行缺 3 个时就不够（比如每行 4 列，最后一行只剩 1 个） - 伪元素无法动态判断该补几个——
content: ""不接受 JS 计算值，纯 CSS 没法知道当前最后一行到底有几个元素 - 补位元素的
width必须和真实li完全一致（包括box-sizing、margin、gap影响），否则宽度错位，space-between仍会拉扯
用 flex-start + margin 抵消更稳
放弃“假装填满”，转而接受左对齐，但让每行内部视觉均衡。关键在容器负边距抵消末项多余间隙：
- 给容器加
margin-right: -12px和margin-bottom: -12px - 每个子项设
flex: 0 0 calc(33.333% - 12px)（假设每行 3 列） - 再统一加
margin-right: 12px和margin-bottom: 12px - 注意：
calc()中的百分比基于容器宽度，若子项高度差异大，可能造成基线不齐
Grid 替代 Flex 是最干净的解法
现代项目优先用 display: grid，天然规避这个问题：
-
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))—— 自动按列平铺，最后一行默认左对齐 - 不用算 margin、不依赖伪元素、不操心换行逻辑
- 响应式靠
minmax()内部调节即可，比 Flex 的flex-basis更直观 - 兼容性需确认：IE11 不支持，但 Chrome/Firefox/Safari/Edge 均已稳定支持多年
JS 动态补位只在必要时才用
当必须维持 space-between 视觉风格，且列数固定（如每行始终 4 个）、数据量不大时，可 JS 计算并插入真实占位元素：
- 先算总数 % 列数，得出最后一行缺几个（如 7 % 4 = 3 → 缺 1 个）
- 用
container.append(...Array(missing).fill(0).map(() => document.createElement('div')).map(el => { el.className = 'placeholder'; return el; })) - 占位元素样式必须和真实项完全一致：
width、margin、box-sizing、甚至border都要复制 - 缺点明显：增加 DOM 节点、服务端渲染需同步处理、SSR 场景易出水合 mismatch
真正容易被忽略的是：问题根源不在“怎么补”，而在“是否真需要 space-between”。多数业务场景里，左对齐+均等间距（Grid 或 flex-start + margin）既可靠又少坑，硬套 space-between 反而把简单事搞复杂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
