justify-content: center 在多行 Flex 中仅居中整个行块序列，不会使每行单独居中，导致末行错位；应移除该声明，改用 gap + 宽度计算实现稳定左对齐。
justify-content: center 在多行 Flex 中只对单行生效
Flex 的 justify-content 控制的是**主轴方向上所有子项作为一个整体的对齐方式**，不是“每行单独居中”。当启用 flex-wrap: wrap 后，换行产生的多行会被浏览器视为一个连续的“行块序列”，justify-content: center 仅把整个序列水平居中——它不会让第二行、第三行也各自居中。结果就是：首行居中，末行靠左（或根据内容宽度浮动），视觉上明显错位。
常见错误现象：.container { display: flex; flex-wrap: wrap; justify-content: center; } + 若干 .item，最后一行只有 2–3 个元素时，它们仍挤在容器中央偏左位置，而非按列宽自然左对齐。
- 这不是 bug，是规范行为：Flex 规范中没有“每行独立对齐”的属性
-
justify-content和gap是正交控制，混用时不会互相修正对齐逻辑 - 若强行保留
justify-content: center，又想末行左对齐，只能靠 JS 动态补空节点或 container queries 做条件渲染——成本远高于换方案
gap 能统一间距但不能解决末行对齐问题
gap 的作用是插入等距空白，它不改变子项的排列逻辑，也不影响 justify-content 的作用范围。设置 gap: 12px 后，末行依然会和首行共享同一个居中基线，间隙只是“加在中间”，无法拉动末行重新定位。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 误以为
gap开了就能自动修复末行对齐 → 实际上它只管“空隙”，不管“位置” - 在
justify-content: center下叠加gap，反而放大错位感（因间隙让末行内容更显孤立） - Safari ≤15.4 中未加
@supports (gap: 0)降级，gap失效后退回到无间距+居中混乱的双重问题
真正可控的末行左对齐：去掉 justify-content，改用 gap + 宽度计算
最稳定的做法是放弃 justify-content: center，转为用容器宽度 + 子项宽度 + gap 构建自然左对齐流。核心是让每行“刚好塞满”或“明确留白在右侧”，而非强制居中整个块。
实操建议：
- 移除
justify-content，保持默认flex-start（即左对齐） - 用
gap统一行列间距：gap: 12px 8px（行距 12px，列距 8px） - 子项设弹性宽度：
flex: 0 0 calc(25% - 6px)（假设 4 列，减去 half-gap 避免 overflow） - 必须加
box-sizing: border-box，否则 padding/border 会让实际宽度超限，触发意外换行
响应式场景下，用 @media 调整列数和 calc() 中的百分比即可，无需触碰对齐逻辑。
必须用 margin 时如何避免末行错位
如果项目需兼容 IE 或旧 Safari（不支持 gap），只能靠 margin 模拟间距，但必须清除换行边界上的冗余外边距。
关键点：
- 不要用
:last-child清除margin-right—— Flex 换行后 DOM 顺序 ≠ 视觉顺序，规则完全失效 - 改用
:nth-child(4n)清除每行末尾项的margin-right（假设每行 4 个）：.item:nth-child(4n) { margin-right: 0; } - 末行底部多余
margin-bottom无法用 CSS 精准识别，统一用父容器padding-bottom替代，子项只设margin-bottom用于行内分隔 - 所有
margin必须配合flex-basis精确控制换行点，例如flex: 0 0 200px比width: 200px更可靠
gap 是现代解法，但末行对齐这个点，从来不是靠某个属性“修好”，而是靠放弃错误前提（每行都该居中）、回归布局本质（宽度+间隙+换行规则）来绕过限制。真正难的不是写对代码，是意识到 justify-content: center 在多行 Flex 里本就不该出现。
