justify-content: space-between对flex最后一行失效，因它只作用于整行逻辑单元而非单个子项；伪元素补位需动态计算且纯css仅适用于固定列数与总数；更优解是flex-start配margin抵消或改用grid布局。
Flex最后一行不齐时，为什么justify-content: space-between会失效
因为 justify-content 只作用于**当前主轴上的所有子项整体**，它不会为“最后一行单独重新计算”。当子项换行后，浏览器把整行当作一个逻辑单元处理，space-between 仍试图把这一行的首尾项撑满容器宽度——但若该行只有1个或2个子项，就会明显左偏。
用伪元素补位的原理和实操限制
核心思路是：让最后一行也“凑够”预期列数，再用透明/不可见的占位项填满空缺，使 justify-content 能正常生效。但必须注意：
- 补位数量得动态算——比如每行最多显示3个，当前最后一行有2个，则需补1个；有1个则补2个
-
::after伪元素无法传参，不能自动判断该补几个，所以**纯CSS方案只适用于固定列数 + 固定总项数**（极少见） - 更现实的做法是：用 JS 计算缺几个，然后在 DOM 末尾插入对应数量的
<div class="flex-placeholder"></div> - 补位元素必须和真实子项具有相同
flex-basis、margin和box-sizing，否则对齐错位
更靠谱的替代方案：justify-content: flex-start 配合 margin 控制
放弃“假装填满”，直接接受左对齐，但让每行内部视觉均衡。常见做法是给每个子项加右/下边距，再用负外边距抵消容器边缘多余间隙：
.container {
display: flex;
flex-wrap: wrap;
margin-right: -12px; /* 抵消最后一个子项的 right margin */
margin-bottom: -12px;
}
.item {
flex: 0 0 calc(33.333% - 12px); /* 假设每行3个，留出间距 */
margin-right: 12px;
margin-bottom: 12px;
}这个写法兼容性好，无需补位，也不依赖 JS。但要注意：calc() 中的百分比基于容器宽度，如果子项内容高度差异大，可能造成行高不一致、基线错乱。
立即学习“前端免费学习笔记（深入）”；
Grid方案其实更干净，但得看兼容需求
如果目标环境支持 Grid（现代浏览器基本都 OK），直接用 display: grid 替代 Flex，配合 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，天然按列平铺，最后一行自动左对齐，无需补位、无 margin 抵消陷阱。
唯一复杂点在于：Grid 的响应式断点需要靠 @media 或 minmax() 内部调节，而 Flex 的 flex-basis 更容易做逐级降级。老项目里硬切 Grid，可能要连带改一堆动画和 JS 尺寸监听逻辑。
