在使用 CSS Flex 布局时，如果子元素设置了固定宽度，并且容器启用了换行（flex-wrap: wrap），当子元素无法填满整行时，最后一行的元素默认可能会出现居中或不规则排列的情况。即使设置了 justify-content: flex-start，看起来似乎“没生效”，其实是因为前面的行被自动拉伸占满了空间，而最后一行才真正遵循了靠左对齐。
问题原因：justify-content 的作用机制
justify-content: flex-start 确实会让每一行内的子元素从左侧开始排列，但它只控制**主轴方向上的对齐**，不能解决多行情况下“每行都尽量填满”的视觉错觉。特别是在使用均分宽度（如 flex: 1）或等宽子项但数量不能被每行个数整除时，最后一行剩余的空白会让它看起来“没靠左”——但实际上它是靠左的，只是右边留白了。
解决方案：确保视觉上靠左对齐
为了让最后一行元素明显靠左，并避免其他行为了“填满”而拉伸间距，可以采用以下方法：
- 不要使用 justify-content: space-between 或 space-around，这些会让元素之间产生动态间隔，影响最后一行的对齐表现。
- 明确设置 justify-content: flex-start，让所有行都从左边开始排列。
- 给子元素设定固定宽度（如 width: 200px）并配合 flex-wrap: wrap，而不是依赖 flex: 1 自动填充。
- 如果希望每行固定显示 N 个元素，可以通过计算子元素的 width 百分比来实现，例如每行 4 个，则 width: 25%。
注意：如果你发现 justify-content: flex-start 没有效果，请检查父容器是否设置了其他会影响布局的样式，比如 align-items、padding 或 margin 导致的偏移。
立即学习“前端免费学习笔记（深入）”；
示例代码
下面是一个正确实现最后一行靠左的 flex 布局示例：
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* 关键：左对齐 */
gap: 10px; /* 可选：统一间距 */
}
.item {
width: calc(25% - 10px); / 假设每行最多 4 个，减去间隙 /
background: #eee;
padding: 20px;
box-sizing: border-box;
}
这样无论有多少个子元素，每一行都会从左侧开始排列，最后一行自然也是靠左，不会出现中间对齐或右侧留大片空白的问题。
基本上就这些。关键是理解 justify-content 的行为边界，合理设置子项宽度和容器换行策略。
