justify-content: flex-start仅控制每行整体左对齐，不解决末行右侧空白；真正有效的是::after伪元素占位（flex: auto）或改用Grid的justify-content: start。
justify-content: flex-start 是最直接有效的解法，但仅适用于不需要“行内两端对齐”、只要求整体左对齐的场景。若你用了 space-between 或 space-around 却发现最后一行飘在中间，说明 Flex 默认行为正在干扰视觉一致性——这不是 bug，是设计使然。
为什么 justify-content: space-between 会让最后一行错位
Flex 多行布局中，justify-content 作用于**每一行独立计算后的剩余空间**。当某行元素不足时，剩余空间仍被均分到元素之间（或两侧），导致最后一行看起来“居中”或“右偏”。浏览器不会跨行重分配主轴空间。
- 例如每行预期 4 个
.card，但最后一行只有 2 个：它们之间的 gap 和两侧 margin 仍按 4 元素逻辑分配 -
gap属性不影响该问题——它只控制 item 间距，不改变justify-content的行级计算逻辑 - 该行为在 Chrome/Firefox/Safari 中完全一致，不是兼容性问题，而是规范定义
纯 CSS 方案：伪元素填充 ::after
在容器末尾注入一个不可见但占位的弹性项，让 Flex 认为该行“已填满”，从而让真实子项回归 flex-start 对齐逻辑。
.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 保留原有对齐意图 */
}
.card-grid::after {
content: "";
flex: auto; /* 等效于 flex: 1 0 0；会吸收本行所有剩余空间 */
}- 必须配合
flex-wrap: wrap，否则伪元素会强行撑开单行 -
flex: auto比flex: 1更安全：它尊重flex-basis（默认为auto），不会强制压缩真实卡片 - 如果卡片本身有
margin-right，需确保伪元素不触发换行（一般不会，因无内容且flex-basis: 0）
动态数量场景：用 :nth-child 修正最后一项 margin-right
当每行列数固定（如 3 列/行），可通过选择器识别最后一行元素个数，并手动清除多余右间距。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
width: calc(33.333% - 10px);
margin-right: 10px; /* 默认右侧留空 */
}
/* 最后一行只有 1 个元素 → 清除其右 margin */
.card:last-child:nth-child(3n+1) {
margin-right: 0;
}
/* 最后一行只有 2 个元素 → 第 2 个清除右 margin */
.card:last-child:nth-child(3n+2) {
margin-right: 0;
}- 公式
3n+1表示总元素数模 3 余 1，即最后一行剩 1 个；同理3n+2剩 2 个 - 此法要求卡片宽度严格固定（含 gap 计算），否则 nth-child 无法准确映射物理行位置
- 不适用于响应式列数变化（如从 3 列断点切到 2 列），需配合媒体查询重写选择器
真正省心的替代：改用 display: grid
Grid 天然按轨道（track）分配空间，justify-content: start 或默认行为都会让最后一行左对齐，且无需 hack。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
justify-content: start; /* 显式声明更清晰，实际可省略 */
}-
auto-fill+minmax()自动适配列数，比 Flex 的calc()更健壮 - IE11 不支持
gap，需回退为grid-column-gap/grid-row-gap - 若需支持旧版 IE，伪元素方案仍是当前最稳妥的 Flex 内解法
关键忽略点：很多人试图用 margin-left: auto 或 margin-right: auto 在最后一行子项上做文章，但 Flex 的 auto margin 只在单行中生效，多行下会被重置——这是最容易白忙活的坑。
