flex的justify-content: center只对单行内子项生效，换行后各行独立对齐，第二行默认左对齐；根本原因是其设计为“行内对齐”而非“跨行对齐”，每行主轴起点独立计算。
Flex 容器设了 flex-wrap: wrap 但第二行子项不居中
这是常见误解：很多人以为 justify-content: center 能让所有行都居中，其实它只控制「主轴上单行内」的对齐。当换行发生后，第二行（及后续行）的子项仍按默认左对齐排列，justify-content 不再对其生效。
根本原因是 Flex 的 justify-content 是“行内对齐”，不是“跨行对齐”。每行独立计算，且默认 flex-start —— 所以第二行哪怕只剩一个元素，也会贴左显示。
- 别指望靠
justify-content: center搞定多行居中 - 如果子项宽度固定、数量可预知，可手动给第二行加
margin-left: auto或用伪元素占位 - 更通用的解法是改用 Grid 布局：它天然支持多行对齐，
justify-items: center对所有网格项生效
用 CSS Grid 替代 Flex 实现多行居中
如果你的目标是“无论几行，每行子项都水平居中”，Grid 比 Flex 更直接可靠。不需要计算行数、不依赖子项数量，也不用 hack margin。
只需两步：
- 父容器设
display: grid - 加
justify-items: center（所有子项水平居中）或place-items: center（同时垂直居中）
示例：
.grid-container {
display: grid;
justify-items: center; /* 所有子项水平居中 */
gap: 8px;
}
注意：justify-items 作用于每个网格项自身，不受行/列位置影响；而 Flex 的 justify-content 只管当前行的剩余空间分配。
Flex 下强行让第二行也居中（不推荐但有时必须）
某些场景无法改布局（比如第三方组件限制只能用 Flex），这时得用“补位”思路：让第二行看起来居中，本质是制造视觉平衡。
- 给最后一行第一个子项加
margin-left: auto，最后一个加margin-right: auto—— 但需 JS 判断哪几个在最后一行，维护成本高 - 更简单粗暴：父容器加
text-align: center，子项设display: inline-flex或inline-block，退回到行内流式对齐（失去 Flex 的弹性优势） - 最稳的妥协：限制每行子项数量，用
flex-basis控制换行点，确保最后一行总是奇数个且居中分布（例如每行最多 3 个，用flex: 0 0 calc(33.333% - 8px)）
为什么 align-items 不起作用
有人试过加 align-items: center，发现第二行还是左偏——因为 align-items 控制的是「交叉轴对齐」（通常是垂直方向），和水平居中无关。它决定子项在行高方向怎么排（上/中/下），不影响左右位置。
容易混淆的点：
-
justify-content→ 主轴（默认水平）对齐：控制左/中/右 -
align-items→ 交叉轴（默认垂直）对齐：控制顶/中/底 - 换行后，每行有自己的主轴起点，
justify-content不继承到下一行
真正容易被忽略的是：Flex 多行布局本质上没有“全局居中”概念，它的设计哲学是“行内自治”。想绕过这点，要么换 Grid，要么接受它本来就不支持——硬搞只会增加不可维护的修补逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
