结论：justify-content 控制主轴对齐，align-items 控制交叉轴对齐；两者必须配合 display: flex 才生效，单独写没用。元素没居中主因是父容器未设 display: flex、缺乏明确高度（尤其垂直居中时），或 flex-direction 改变导致主/交叉轴方向错配。
直接说结论：justify-content 控制主轴对齐，align-items 控制交叉轴对齐；两者必须配合 display: flex 才生效，单独写没用。
为什么元素没居中？先确认这三件事
常见错误不是属性写错，而是基础条件缺失：
-
display: flex没加在父容器上——这两个属性只作用于 Flex 容器，不是子元素自己设的 - 父容器没设置明确高度（尤其垂直居中时）——
align-items: center在无高度的容器里可能“看起来没反应” - 误把
flex-direction: column当默认——此时主轴变垂直，justify-content就管上下，align-items管左右
justify-content 常见值的实际效果差异
它只管主轴方向的“整体分布”，不改变单个子项尺寸或位置逻辑：
-
center：所有项目整体居中，两端留白相等 -
space-between：首尾项目贴边，中间间隙均分——适合导航栏、按钮组 -
space-around：每个项目“周围”空间相等，所以相邻项目间空隙是边到项目空隙的两倍 -
space-evenly：所有空隙（包括首尾）完全相等，视觉最均衡，但兼容性略差（IE 不支持）
注意：justify-content 对单个项目无效——如果只想让一个子元素居中，margin: auto 更直接。
align-items 的 stretch 默认行为常被忽略
默认值是 stretch，不是 flex-start。这意味着：
- 子元素没有设置高度时，会自动拉伸填满容器交叉轴（比如
flex-direction: row时填满整个父高） - 一旦子元素写了
height或min-height，stretch就失效，退回到flex-start行为 -
align-items: center垂直居中时，若子元素是图片或行内元素，要留意其vertical-align或line-height干扰
调试建议：在开发者工具里临时删掉子元素的 height/min-height，看是否突然“跳”到居中位置——那是 stretch 在起作用。
Flex 多行时 align-items 和 align-content 的分工
这是最容易混淆的点：
-
align-items：控制**每一行内**的子元素在交叉轴上怎么对齐（比如每行都垂直居中） -
align-content：只在flex-wrap: wrap且有多行时有效，控制**所有行作为一个整体**在交叉轴上怎么分布（比如多行内容整体垂直居中） - 单行时
align-content完全无效，别浪费时间调它
典型陷阱：给单行 Flex 容器设了 align-content: center 却发现没变化——因为根本没触发条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
