justify-content控制主轴对齐（如row时左右），align-items控制交叉轴对齐（如row时上下）；二者配合center可实现完全居中，但需父容器有明确宽高且设display:flex。
justify-content 控制主轴方向的对齐方式
主轴方向由 flex-direction 决定，默认是水平（row），此时 justify-content 管左右对齐。它只影响 flex 项目在主轴上的分布，不影响垂直位置。
-
justify-content: center：项目在主轴居中，比如水平居中；若flex-direction: column，则变成垂直居中（此时主轴是纵向） -
justify-content: flex-start/flex-end：靠左/靠右（或靠上/靠下）对齐 -
justify-content: space-between：首尾贴边，中间等距；注意：只有两个及以上项目才看出效果 - 常见误区：
justify-content对单个项目“居中”有效，但若父容器没设高度、或子项没撑开容器，视觉上可能不明显——得配合align-items或明确尺寸
align-items 控制交叉轴方向的对齐方式
交叉轴始终垂直于主轴。默认主轴是 row，那交叉轴就是纵向，align-items 就管上下对齐；反过来，主轴为 column 时，它就管左右对齐。
-
align-items: center：最常用，让所有项目在交叉轴上居中（如默认流下的垂直居中） -
align-items: stretch：默认值，项目会拉伸填满交叉轴长度（除非设置了固定宽/高） -
align-items: flex-start/flex-end：对应顶部/底部（或左侧/右侧）对齐 - 注意：
align-items作用于所有直接子项；如果只想单独控制某个子项，用align-self
同时用 justify-content 和 align-items 实现完全居中
要让一个 flex 项目在容器里真正水平+垂直居中，通常只需两行 CSS，但前提是容器有明确的宽高（尤其是高度），否则可能“看不见居中效果”。
- 父容器必须设
display: flex - 推荐组合：
justify-content: center+align-items: center - 若容器高度依赖内容，记得加
min-height: 100vh或显式height，否则align-items: center在纵向上无参考基准 - 示例：
.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
align-items 不生效？先检查这几个地方
经常遇到写了 align-items: center 却没反应，大概率不是写错了，而是布局前提缺失。
立即学习“前端免费学习笔记（深入）”；
- 父元素没设
display: flex—— 这是最常见的漏写 - 父容器高度为 0（比如子项是纯文字且未换行，又没设
height或min-height），导致交叉轴无空间可“居中” - 子项设置了
align-self: stretch（或默认拉伸）且本身有固定高度，会覆盖align-items - 父容器用了
flex-direction: column却还指望justify-content垂直居中——其实这时它才是管垂直的，align-items反而管水平了，容易混淆方向
