justify-content作用于“行”而非“项目”，控制整行在主轴上的位置；flex-wrap启用后，每行单独计算剩余空间并应用该规则；最后一行仅2项时space-between仍强制撑满，导致视觉悬浮居中；flex-start虽左对齐但右侧留白不均；伪元素补位需与子项同规格（flex: 0 0 相同基准值+display明确）；Grid用auto-fit+minmax更简洁，但1fr会拉伸列宽，严格控列数需repeat固定数量。
justify-content 作用对象是“行”，不是“项目”
它控制的是整行在容器主轴上的位置，而不是该行内部项目的分布方式。当 flex-wrap: wrap 启用后，浏览器会为每一行单独计算剩余空间，并把 justify-content 规则应用到这一行的所有子项构成的“逻辑行盒”上。最后一行只有 2 个子项，justify-content: space-between 仍会把它当成“需要撑满整行”的一行来处理——首项贴左、末项贴右、中间空隙均分，结果就是两个项目被硬生生拉开，视觉上悬浮居中。
flex-start 对最后一行“看起来左对齐”，但实际留白不均
设 justify-content: flex-start 确实会让每行都从左开始排，但它不解决右侧空白问题。尤其当子项带 margin-right 或容器用了 gap 时，最后一行末项右边仍有一大段空隙，而第一行末项右边却没这空隙——因为前几行被其他项目占满了。这不是对齐失败，是设计逻辑本就不提供 per-line 的间隙控制。
::after 伪元素补位必须和子项“同规格”才生效
常见错误是只写 .container::after { content: ""; flex: 1; }，但这样在 Safari 或旧版 WebView 中可能失效。真正起效需同时满足：
-
flex: 0 0 <same-basis-as-item>（例如子项是flex: 0 0 200px，伪元素也得是flex: 0 0 200px） -
display: block或display: flex（不能省略，否则某些引擎忽略宽度） - 响应式下必须同步重置：子项在
@media (max-width: 768px)改成flex: 0 0 calc(50% - 8px)，伪元素也得加对应规则
Grid 是更干净的替代方案，但要注意 minmax() 的行为
用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) + justify-content: start，所有行天然左对齐，无需补位。但要注意：minmax(240px, 1fr) 中的 240px 是最小列宽，不是固定列数；如果容器宽度刚好卡在 3 列和 4 列临界点，可能出现某行只排 3 个但列宽被拉伸到远超 240px——这不是 bug，是 1fr 在自动分配剩余空间。需要严格控列数时，得配合 repeat(4, minmax(240px, 1fr)) 再加 overflow-x: auto，而非依赖 auto-fit。
立即学习“前端免费学习笔记（深入）”；
