Flex最后一行不靠左是因justify-content仅作用于单行，多行时需用伪元素占位法：容器设flex-wrap: wrap，::after设content:""、display:block、flex:0 0 100%、margin-left:auto。
Flex最后一行不靠左？用 justify-content: flex-start 不够
Flex容器设了 justify-content: flex-start，但多行时最后一行还是居中或右对齐——这不是bug，是默认行为。Flex的 justify-content 只作用于**单行内**的主轴对齐，对多行（flex-wrap: wrap）的各行之间无影响。最后一行的对齐由整行“剩余空间”决定，而它默认继承容器的 justify-content 值，表现就像那一行自己成了个独立容器。
真正起效的是 align-content + 伪元素占位法
纯CSS标准方案里，align-content 控制的是**行与行之间的交叉轴分布**，和最后一行主轴对齐无关。所以不能靠它。目前最稳定、无需JS、兼容到Edge 17+的做法，是用伪元素撑开最后一行右侧空白，强制它“没空间可居中”。
- 给Flex容器加
display: flex和flex-wrap: wrap - 在容器末尾插入一个不可见的伪元素：
::after，设content: "" - 该伪元素设
flex: 0 0 100%或width: 100%，让它独占一整行 - 再用
margin-left: auto把它推到最右，从而把前一行“挤”到左边
.container {
display: flex;
flex-wrap: wrap;
}
.container::after {
content: "";
flex: 0 0 100%;
margin-left: auto;
}
为什么不用 justify-content: start 或 flex-end？
这些值在多行场景下完全无效——它们只在单行且存在剩余空间时才生效。一旦换行，浏览器会为每一行单独计算主轴剩余空间，而最后一行往往刚好填满（或几乎填满）容器宽度，导致 justify-content 失去作用对象。实测中，哪怕只差1px，它也可能突然居中，行为不可控。
-
justify-content: start在Safari 14.1+才支持，旧版需用flex-start - 某些安卓WebView对
justify-content多行处理有差异，结果不一致 - 如果项目宽度动态变化（比如响应式），仅靠
justify-content无法保证最后一行始终靠左
伪元素方案的坑：内容为空但占布局，要防意外换行
伪元素默认是 display: inline，直接设 width: 100% 可能失效。必须显式设 display: block 或 display: flex，否则在部分iOS Safari中会忽略宽度。
立即学习“前端免费学习笔记（深入）”；
- 务必加
display: block到::after，否则width: 100%不生效 - 如果Flex项目本身用了
min-width或百分比宽度，要确认伪元素不会触发多余换行（比如容器宽300px，项目宽120px×2=240px，剩60px，伪元素100%就占300px，强制换行） - 若容器有
padding，伪元素的100%是按内容区算的，一般没问题；但若用了box-sizing: border-box且 padding 较大，可能需要微调
这事本质是CSS Flex规范里没定义“最后一行对齐”，所以得绕。真要彻底解耦，就得上JS监听resize后重排，但95%的场景，伪元素那三行CSS就够了。
