用伪元素::after补齐最后一行是最稳妥的折中解，通过添加透明占位元素欺骗flex布局使space-between正常计算间距；Grid方案更优但需兼容性支持。
直接用 justify-content: flex-start 就能实现最后一行靠左对齐，但“有间距”这个需求会立刻打破默认行为——因为一旦加 gap 或 margin，flex-start 下的间距只作用于元素之间，末尾空白仍存在，视觉上还是“不整齐”。真正的难点不在对齐，而在**保持行内间距一致的前提下让最后一行不撑满、不右飘**。
为什么 justify-content: space-between 会让最后一行错位
这是最常踩的坑：space-between 要求首尾元素贴边，中间等分剩余空间。当最后一行元素不足时，它仍强行把第一个和最后一个元素拉到容器两端，导致中间空隙异常放大，甚至比上一行还宽。这不是 bug，是 spec 明确定义的行为。
- 比如容器宽 1200px，子项宽 200px，每行最多 5 个 → 理想间隙 = (1200 − 5×200) / 4 = 50px
- 最后一行只有 3 个元素 →
space-between会把它们拉到 0px、600px、1200px 位置，间隙变成 600px，完全失真 -
gap属性在flex-wrap下虽可用，但它只控制相邻元素间距离，不解决末尾悬空问题
用伪元素 ::after 补齐最后一行（兼容性好，推荐）
核心思路：欺骗 flex 布局，让它“以为”最后一行是满的，从而让 justify-content: space-between 正常计算间距，再用透明伪元素占位，不占高度。
- 父容器必须设固定宽度或明确
max-width，否则伪元素宽度无法匹配 - 伪元素
width必须和子项宽度单位一致（如都用px或都用%），否则错位 - 要加
flex-grow: 0; flex-shrink: 0;防止被压缩，且height: 0或font-size: 0消除基线影响 - 示例：
.container::after { content: ""; flex: 0 0 200px; height: 0; }（假设子项width: 200px）
改用 Grid 布局替代 Flex（现代项目首选）
Flex 本质是一维布局，强行处理多行对齐是硬凑；Grid 天然支持二维流式填充，justify-content: start + gap 组合就能干净实现“每行左对齐、行内等距、自动换行”。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))—— 自适应列数，最小 200px -
gap: 10px直接生效，无兼容性陷阱 - IE11 不支持
auto-fill和minmax()，需 fallback 到媒体查询或 JS 计算列数 - 不需要伪元素、不需要 nth-child 算术，代码更易维护
用 margin-right: auto 收尾（简单但有局限）
给最后一个子项加 margin-right: auto，能把它左边所有元素“挤”向左侧，实现视觉左对齐。但只适用于单行或最后一行元素极少的场景。
- 仅对最后一行有效，前提是知道哪一个是最后一行（通常靠
:last-child或 JS 标记） - 如果子项宽度不固定（如用
%或flex-basis），auto的行为可能不稳定 - 无法控制行内间隙一致性，容易和上一行的
gap不匹配 - 适合快速原型或内容量可控的后台列表，不适合商品墙、卡片流等动态内容
真正麻烦的不是“怎么左对齐”，而是“怎么在保持行内间距恒定的前提下左对齐”——这意味着你得在 Flex 的约束里做减法，或干脆换赛道用 Grid。伪元素方案看似取巧，实则是目前最稳妥的折中解；而 Grid 方案一旦兼容性允许，就别回头。
