在 CSS Flex 布局中，当我们给容器设置 justify-content: space-between 并且允许换行（flex-wrap: wrap）时，每一行内的子项会均匀分布在主轴方向上，首尾贴边、中间留空。这种效果在满行时很好看，但如果最后一行子项数量不足，它们也会被“拉开”，导致最后一行两侧分散、整体左对齐失效。很多人在做筛选标签、商品列表时都会遇到这个尴尬问题。
为什么 space-between 会让最后一行分散
Flex 容器的 justify-content 属性控制的是“行内剩余空间”的分配策略。space-between 的含义是：将自由空间平均分配到相邻子项之间，第一个贴主起点，最后一个贴主终点。当某一行没有填满时，该行本身存在大量剩余空间，space-between 依然会把这些空间塞进子项中间，于是最后一行看起来就是左右散开而不是从左开始排。
这不是 bug，而是规范定义的行为。因此，想通过再给容器加一个“仅对最后一行生效”的 justify-content 是不现实的——CSS 目前没有提供按行号区分 justify 值的能力。我们必须从结构或布局模型上绕开这个限制。
方案一一：伪元素占位法
最常用也最兼容的写法，是借助一个宽度与子项相同的伪元素（::after）把最后一行的空缺位置“占满”，这样真实子项就没有多余空间可分配，自然全部靠左。前提是子项宽度固定或可知。
下面假设每行理想放置 4 个卡片，卡片宽度 200px，间距通过 margin 控制：
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 200px;
margin-bottom: 20px;
}
/* 当每行最多4个时，用伪元素补位，避免最后一行被拉开 */
.container::after {
content: "";
width: 200px;
}
这段代码的原理是：如果最后一行只剩 1 个真实 .item，那么 ::after 会占据一个“虚拟 item”的宽度，使该行在 Flex 算法中被视为“已满”，space-between 便无额外空间可分。需要注意，若容器宽度变化导致每行数量改变，伪元素宽度也要同步调整，否则补位不准。
该方案的优点是兼容到 IE10+，不需要改 HTML 结构；缺点是依赖固定宽度，且无法应对完全动态的列数。如果列数响应式变化，可以配合媒体查询重写 ::after 的宽度，或者用 JavaScript 动态插入占位节点。
方案二：Grid 布局替代
如果项目无需支持老旧浏览器，直接使用 CSS Grid 会更干净。Grid 的 grid-template-columns: repeat(auto-fill, 200px) 能自动按容器宽度塞入列，且默认左对齐，不存在最后一行分散问题。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
gap: 20px;
justify-content: space-between;
}
这里 justify-content: space-between 在 Grid 中作用于整个网格轨道与容器之间，不会像 Flex 那样把单行内拉开；而 auto-fill 保证列数自适应。最后一行天然从左排列。若希望满行时也均匀分布，可改用 auto-fit 配合 1fr 最小宽度，但那样最后一行仍可能拉伸，所以固定宽度加 auto-fill 是最接近需求的组合。
Grid 方案代码量少、语义清晰，也更容易做到响应式。唯一成本是放弃 IE 支持，但在多数现代后台与移动端项目中已经可以接受。
两种方案对比
| 维度 | 伪元素占位 | Grid auto-fill |
|---|---|---|
| 浏览器兼容 | IE10+、全平台 | 现代浏览器，无 IE |
| 动态列数 | 需媒体查询或 JS 辅助 | 原生自适应 |
| 代码复杂度 | 低，仅加一条伪元素 | 低，布局属性直观 |
| HTML 改动 | 无 | 无 |
从表中可以看出，维护旧系统选伪元素法，新项目直接上 Grid 更省心。核心记住：space-between 的“行内均匀”特性无法针对末行关闭，只能通过补位或换模型解决。
实际开发中的小技巧
若使用伪元素法且子项宽度用百分比（如 24%），那么 ::after 也应写成相同百分比，同时考虑 margin 造成的换行误差。一种稳妥做法是给容器设 row-gap 和 column-gap，子项不设横向 margin，这样伪元素宽度严格等于子项宽即可。
另外，当子项数量刚好是每行的整数倍时，伪元素会跑到下一行形成空白行。为避免这个额外空行，可以把伪元素高度设为 0，或者仅当确认末行不满时才通过 JS 添加占位类。实际中因为 ::after 高度为 0 且容器 align-content 默认拉伸，一般不会露出明显空隙，但最好自测一下。
CSS_Flexflex-wrapjustify-content修改时间：2026-08-09 08:42:28