justify-content: flex-start 是默认行为，末行靠左本是常态；问题本质是右侧留白突兀或与 space-between 冲突导致视觉悬浮，需用 margin-right: auto 作用于 :last-child、::after 伪元素补位或改用 CSS Grid 实现均衡左对齐。
justify-content: flex-start 是默认行为，最后一行靠左本就是它该干的事；问题不在“没对齐”，而在右侧留白突兀、末行视觉悬浮，或与 justify-content: space-between 冲突导致错位。真正要解决的，是让末行看起来均衡、不孤立。
为什么 justify-content: space-between 让最后一行“飘”在中间
这不是 bug，是规范行为：justify-content: space-between 对每一行单独计算，把该行所有子项（哪怕只有 1 个）首尾强行撑到容器左右边缘。最后一行子项少，右侧空白就被拉开了，视觉上像居中。
常见错误包括：
- 加
justify-content: flex-start后毫无变化——它只影响每行起始位置，不消除右侧空隙 - 给
:last-child加margin-left: auto——无法预判哪项是“最后一行第一项”，不可靠 - 误以为
flex-wrap: wrap后justify-content会智能识别末行并特殊处理——它不会
用 margin-right: auto 处理真实末项（最轻量）
它不靠“猜哪行是末行”，而是靠“最后一个 DOM 元素”吃掉右侧所有剩余空间，逼前面所有项左贴边。但必须卡死三个条件：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有
display: flex+flex-wrap: wrap - 子项不能带
flex: 1、flex-grow: 1或width: 100%，否则空间被抢走，margin-right: auto彻底静默 - 样式必须加在真实最后一个子元素上，比如
.item:last-child；JS 插入空节点或伪元素都不算数
响应式下风险点：小屏每行 2 个、大屏每行 4 个时，:last-child 可能不在末行尾部。此时得配合媒体查询 + :nth-child(4n - 1) 等精准定位，或切 JS 动态打标。
用 ::after 伪元素补位（适合固定列数响应式）
原理是“假装末行已满”，让 space-between 有足够子项可均分。但它不是自动补几个，而是硬补一整行（flex-basis: 100%），所以只适用于列数明确且可预估的场景。
关键细节：
- 必须写
flex: 0 0 100%——flex: auto或flex-grow: 1在 Safari 和旧 WebView 中会拉伸变形 - 必须加
display: block——不加则某些引擎无视flex-basis和width - 响应式断点里，伪元素的
flex-basis必须和子项完全一致：子项用flex: 0 0 calc(25% - 12px)，伪元素就得在对应@media里也写flex-basis: calc(25% - 12px)
为什么别硬扛，该换 display: grid 就换
grid 的 auto-fit + minmax() 天然规避这个问题：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}它不依赖“行”概念，也不需要占位、计算余数或监听 DOM 变化。末行元素自动按可用列宽分配，无右侧空隙，语义清晰，兼容性在 2026 年已无实质障碍（IE 已退出主流支持周期）。
真正容易被忽略的是：当子项宽度不固定（如含 flex-grow、minmax() 或 JS 动态改宽）时，margin-right: auto 和伪元素法都会失效——这时连“列数固定”这个前提都崩了，grid 几乎是唯一稳解。
