justify-content: center 仅控制主轴对齐，不分配空间，子元素无宽高、脱离文档流或溢出时会重叠；需同时满足：父容器设 flex 与主轴方向、子元素在文档流中、有可计算尺寸或弹性行为。
justify-content: center 为什么会让子元素重叠？
因为 justify-content: center 只控制主轴（默认是水平方向）上的对齐，它不会自动给子元素分配空间；如果所有子元素没有设置宽度、或宽度超出容器、或使用了 position: absolute 等脱离文档流的方式，它们就会挤在主轴中心点上，视觉上“覆盖”或“重叠”。
确保子元素不重叠的三个前提条件
Flex 居中要真正“各占其位”，必须同时满足：
- 父容器设为
display: flex且明确主轴方向（flex-direction: row或column） - 子元素不能脱离文档流（避免
position: absolute/float） - 子元素需有可计算的尺寸或弹性行为（比如设
width、用flex: 1、或内容本身有固有宽高）
常见误用场景与修正写法
典型错误：只加 justify-content: center，但子元素是多个无宽高的 div，结果全叠在左上角附近。
正确做法（水平居中 + 互不覆盖）：
.container {
display: flex;
justify-content: center; /* 水平居中 */
gap: 12px; /* 关键！用 gap 代替 margin 控制间距 */
}
.item {
flex: 0 0 auto; /* 不伸缩、不压缩、按内容宽高 */
/* 或显式设宽：width: 80px; */
}
若需等宽铺满并居中（如按钮组），改用：
.container {
display: flex;
justify-content: center;
}
.item {
flex: 1; /* 均分剩余空间 */
max-width: 120px; /* 防止单个过宽撑开 */
}
垂直居中也要配 align-items
仅靠 justify-content: center 无法垂直居中。如果目标是“水平+垂直都居中”，必须加上 align-items: center（交叉轴对齐）：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* 交叉轴要有确定尺寸，否则 align-items 无效 */
}
注意：align-items 对单行 Flex 有效；多行时要用 align-content，但前提是设置了 flex-wrap: wrap 且有多行内容——这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
