因为justify-content只作用于单行内的主轴剩余空间分配，flex-wrap启用后每行独立计算，最后一行仍被space-between两端拉伸，这不是失效而是规范行为。
Flexbox的justify-content: space-between为什么对最后一行失效？
因为justify-content只作用于**单行内的主轴剩余空间分配**，当换行（flex-wrap: wrap）后，它不会干预每一行的对齐逻辑——所有行都按同一规则处理，最后一行自然也被拉成两端对齐，这不是bug，是设计如此。
常见错误现象：display: flex; flex-wrap: wrap; justify-content: space-between下，最后一行只有2个子项时，左右留白巨大，视觉上严重失衡。
用margin手动“推”最后一行左对齐
核心思路：不依赖justify-content统一控制，而是让每行靠左排列，再用负外边距+伪元素“撑开”前几行的间距，模拟space-between效果。
- 给所有子项设置
margin-right（如1rem），但最后一列不加——需用:nth-child()计算列数排除 - 在容器末尾插入一个不可见的
::after伪元素，设为flex-basis: 100%强制换行，确保最后一行独立存在 - 关键：给容器设
margin-right: -1rem抵消最后一列的右外边距，否则会多出空白
示例片段：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
}
.item {
flex: 0 0 calc(33.333% - 1rem);
margin-right: 1rem;
}
.item:nth-child(3n) {
margin-right: 0;
}
.container::after {
content: "";
flex-basis: 100%;
}更稳妥的方案：JavaScript动态标记最后一行
纯CSS在响应式场景下容易失效（比如窗口缩放导致列数变化），这时需要运行时判断哪些项属于最后一行。
- 遍历所有子元素，用
getBoundingClientRect()获取每个元素的top值 - 找出
top值最大的那组元素，即为最后一行 - 给它们添加
class="last-row"，再用CSS单独设置justify-content: flex-start
注意点：
- 必须在布局完成后再执行（如
requestAnimationFrame或ResizeObserver监听） - 避免重复绑定，窗口频繁缩放时要做节流
- 服务端渲染（SSR）场景下需在客户端hydrate后才生效
为什么不用justify-content: space-around或space-evenly？
这两个值会让所有行（包括最后一行）两端留白，只是留白大小不同：space-around首尾留白是中间间隙的一半，space-evenly则全部相等。它们都无法实现「前几行两端对齐、最后一行左对齐」这个混合需求。
真正复杂的地方在于：Flexbox规范本身没有「按行差异化对齐」的能力，任何解决方案都是在绕过这个限制。CSS Grid虽然能用justify-content配合grid-template-columns更精细控制，但Grid的行列固定性又带来新约束——选哪个，得看你是否允许子项按网格轨道严格对齐。
