justify-content: space-between 会让最后一行“不听话”，因为它按整行分配剩余空间，不区分是否满行；最后一行仅2个元素时仍被左右撑开，导致悬浮居中而非左对齐。
为什么 justify-content: space-between 会让最后一行“不听话”
因为 justify-content 只控制整行的对齐逻辑，不是逐行生效。设了 space-between 后，浏览器会把每行剩余空间均分给所有项目——包括最后一行。它根本不管“这行只剩 2 个子项”，照样把左右边距撑开，造成视觉上悬浮居中。
常见错误是加了 justify-content: flex-start 或 start，结果毫无变化：这两个值只影响第一行起始位置，对换行后的其他行无效。
关键限制：justify-content 在 flex-wrap: wrap 容器里，对“单行内部”的对齐无能为力。你看到的“最后一行没左对齐”，不是写错了，是它本来就不负责这事。
用 margin-right: auto 处理真实末项
这是最轻量、无需预设列数的方案，但必须满足三个硬性条件：
- 父容器声明
display: flex且flex-wrap: wrap - 子项不能有
flex: 1、flex-grow: 1或width: 100%—— 否则它们会抢占空间，margin-right: auto彻底失效 - 样式必须加在 DOM 中真实的最后一个子元素上，比如
.item:last-child；如果 JS 动态插入了空节点，:last-child就会选错目标
示例：
.container { display: flex; flex-wrap: wrap; }
.item { width: 200px; } /* 固定宽，不拉伸 */
.item:last-child { margin-right: auto; }
注意：一旦容器同时设置了 justify-content: space-between，margin-right: auto 会被覆盖——前者优先级更高。
用 ::after 伪元素补位（适合响应式列数）
当列数随断点变化时（比如小屏 3 列、中屏 4 列、大屏 5 列），伪元素法更可控，但需手动匹配尺寸：
-
::after的flex-basis必须和真实子项一致，含 margin 间距。例如子项flex-basis: calc(25% - 8px)，伪元素就得用同样值 - 不要用
visibility: hidden或opacity: 0—— 它们仍参与布局计算，可能被读屏器误读；推荐height: 0; overflow: hidden; - 每个断点都要重置伪元素的
flex-basis，否则小屏下可能多出空白项
示例（4 列场景）：
.grid { display: flex; flex-wrap: wrap; }
.grid::after {
content: "";
flex: auto;
height: 0;
overflow: hidden;
}
@media (min-width: 768px) {
.grid::after { flex-basis: calc(25% - 8px); }
}
容易被忽略的兼容性与边界问题
伪元素补位在 Safari 15.4 之前对 flex-basis 计算有偏差，margin-right: auto 在旧版 Android WebView 中偶发失效。真正麻烦的是动态内容：比如通过 JS 插入新项后，:last-child 不再指向业务意义上的“末项”，而 ::after 无法感知 DOM 变化，补位数量就错了。
没有银弹。列数固定优先用 margin-right: auto；响应式且需强兼容，得靠 JS 计算剩余空位再 patch 类名或内联样式——CSS 自身缺乏运行时计数能力，这点始终没变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
