justify-content 在 flex 换行后并非失效，而是仅作用于每行内部；末行对齐需用 grid、gap+margin、占位符或 JS 动态补全等方案实现。
justify-content 在 flex 换行后不生效？因为没开 wrap
flex 容器默认是单行的，justify-content 只对当前行起作用。如果你有多个子项、设置了 flex-wrap: wrap，但最后一行还是左对齐（尤其当它不满时），那不是 justify-content 失效，而是它根本没被设计来处理“最后一行单独对齐”——它控制的是所有行在主轴上的整体分布方式，不是每行独立对齐。
最后一行想居中或右对齐？用 justify-content 不够，得加空占位项或改用 gap + auto margin
真正能影响最后一行对齐的，是该行内部子项的排列逻辑。常见实操方案有：
- 手动补
<div style="visibility:hidden;flex:none"></div>占位，凑满一行再靠justify-content: center—— 简单但维护麻烦，响应式下易失效 - 用
gap配合margin: 0 auto控制单个子项：给子项设margin: 0 auto，它会在其所在行内居中（前提是该行只有它一个）；但多于一个时会失效 - 更稳的方案：把容器设为
display: grid，用grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))+justify-items: center，天然支持末行居中
justify-content: space-between 在换行时为什么看起来“错位”
这是最常被误解的现象：justify-content: space-between 会让首项贴左、末项贴右，中间均分空白——但它只对「当前行」生效。换行后，第二行又重新执行一遍这个逻辑：它的第一个子项贴左，最后一个贴右。所以如果每行数量不同，各行的“贴边位置”就不同，视觉上就像错开了。
例如三列布局，7 个子项会分两行（3+4），第二行的第 4 个会贴右，但第一行的第 3 个也贴右，而它们实际宽度可能不同，导致右边界不齐。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 0 0 calc(33.333% - 10px); /* 假设 gap 10px */
margin-bottom: 10px;
}真正可控的末行对齐：用 CSS container queries 或 JS 动态补空节点
纯 CSS 下没有“最后一行专用对齐”属性。如果业务强依赖末行右对齐/居中，且 grid 不适用（比如要兼容老浏览器），就得妥协：
- 用 JS 统计每行元素数，动态插入空
<div class="placeholder"></div>补足最后一行到满额 - 用
@container查询容器宽度，配合repeat(auto-fit, ...)切换列数，让末行概率变高、但无法 100% 保证 - 接受现实：用
justify-content: flex-start+ 左对齐文字内容，是最稳定的选择
别指望 justify-content 能跨行协调对齐——它从设计上就不负责这事。需要末行特殊处理，本质已超出 flex 主轴对齐的能力边界。
