justify-content: space-between 在 flex-wrap: wrap 时最后一行不左对齐，是因为它将主轴剩余空间整体等分，不区分行数；最后一行元素不足时仍撑开两端，属规范行为而非 bug。
flex-wrap: wrap 时 justify-content: space-between 为什么最后一行不左对齐？
因为 justify-content: space-between 是对**整个容器的主轴剩余空间**做等分分配，它不区分“第几行”，所有行共享同一套计算逻辑。当最后一行元素不足时，space-between 仍会把左右两端撑开，导致视觉上右端悬空——这不是 bug，是规范定义的行为。
用 justify-content: flex-start 配合伪元素“占位”最可靠
核心思路：让最后一行也凑够满行数量，用透明/不可见的占位元素“骗过” flex 布局，再通过 visibility: hidden 或 opacity: 0 隐藏它们。关键点在于占位数要动态计算：
- 假设每行最多显示 4 个子项，当前共 11 个，则最后一行有
11 % 4 = 3个，需补4 - 3 = 1个占位项 - 占位元素必须和真实子项同级、同
flex-basis，否则宽度不一致会导致错行 - 不能用
display: none，它会让 flex 容器完全忽略该元素，占位失效
示例结构（CSS）：
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.grid > * {
flex: 0 0 calc(25% - 12px); /* 每行4个，预留间隙 */
margin-right: 12px;
}
.grid > *:nth-child(4n) {
margin-right: 0;
}
/* 占位元素样式 */
.grid > .placeholder {
visibility: hidden;
pointer-events: none;
}JavaScript 动态补占位元素前先确认是否真需要
纯 CSS 方案在响应式场景下容易失效（比如屏幕变小后每行只容 2 个，但占位逻辑还是按 4 算）。此时必须 JS 参与：
立即学习“前端免费学习笔记（深入）”；
- 监听
resize，重新计算容器宽度和单个子项渲染后宽度 - 用
getComputedStyle(el).flexBasis或el.offsetWidth获取实际占用宽度 - 避免在每次 resize 中直接操作 DOM，建议用
requestAnimationFrame节流 - 服务端渲染（SSR）页面首次加载时，JS 还未执行，占位缺失会导致 FOUC，可先加一层
min-height防布局抖动
Grid 替代方案更简洁但兼容性要兜底
如果目标环境支持 display: grid（Chrome 57+/Firefox 52+/Safari 10.1+），直接用 justify-content: start + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 就能天然实现“每行尽可能多、末行左对齐”。但 IE11 及更老浏览器不支持，必须降级：
- 检测
CSS.supports('display', 'grid')决定启用哪套样式 - 降级到 Flexbox 时，别直接复用原 flex 样式——grid 的
gap和 flex 的margin行为不同，间距容易错乱 - 不要依赖
@supports嵌套写法，部分旧版 Safari 对嵌套支持不稳定
真正难的不是写出某一种解法，而是判断当前项目里用户设备分布、构建工具能否注入运行时检测、以及设计师是否接受“最后一行少于 N 个时留白”这种妥协方案。
