使用 flex-wrap: wrap 时最后一行靠左是正常现象，因 justify-content 作用于整行而非末行；可通过伪元素占位、调整 margin 或改用 CSS Grid 实现末行均匀分布。
当使用 flex-wrap: wrap 时，如果容器宽度不足以让最后一行填满，而你又设置了 justify-content: flex-start（默认值），那最后一行元素确实会靠左对齐——这本身是正常且符合预期的行为。但很多人真正想问的是：如何让最后一行也像前面那样“两端对齐”或“居中”，而不是孤零零地堆在左边？
问题本质：justify-content 控制的是整行的对齐，不是单个换行后的“末行”
Flex 的 justify-content 作用于**每一行内部的主轴对齐**，但它不会“智能判断”哪一行是最后一行并单独处理。所以即使设成 space-between 或 center，只要最后一行元素不够撑满一行，就会出现空隙在右侧（space-between）或整体居中（center），而非你想要的“视觉上均匀分布”。
常用且实用的解决方法
以下几种方式无需 JS，纯 CSS 可实现更均衡的末行布局：
-
用伪元素占位（推荐）：给容器添加一个透明的、flex-basis 为 100% 的伪元素，强制末行变成“满一行”，再配合
justify-content: space-between，就能让真实元素均匀分布。 适用场景：子项宽度固定或可预估，且不希望改变 DOM 结构。 -
设置子项 flex: 0 0 auto + margin-left/auto（需配合父容器 padding）：通过给每个子项加
margin-left: auto并在第一项取消，可模拟“每行首项左对齐、其余右推”的效果；但更稳妥的做法是结合margin: 0 auto和容器text-align: center（对 inline-flex 有效）。 -
改用 grid 布局（现代替代方案）：如果支持较新浏览器，
display: grid配合grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))+justify-content: center，天然支持末行居中，语义更清晰、控制更直接。
伪元素占位法示例（最常用）
假设每行最多放 4 个子项，容器宽度刚好容纳 4 个：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container::after {
content: "";
flex: auto; /* 或 flex-basis: 100% */
}
.item {
flex: 0 0 calc(25% - 12px); /* 留出间隙 */
margin: 6px;
}原理：伪元素会占据一整行（flex-basis: 100%），把最后一行“撑开”，使 space-between 在该行也能生效，真实子项就被自动分隔开。
基本上就这些。关键不是死守 justify-content: flex-start，而是理解它只管“行内对齐”，末行特殊处理得靠技巧或换布局模型。
