justify-content 控制主轴对齐（如 flex-direction: row 时为水平方向），align-items 控制交叉轴对齐（此时为垂直方向）；二者作用轴向随 flex-direction 改变而互换，且生效需父容器为 flex 容器、子元素无干扰定位或尺寸限制。
align-items 和 justify-content 的作用方向区别
justify-content 控制主轴（main axis）上的对齐，也就是 flex 容器默认的行方向（flex-direction: row 时是水平方向）；align-items 控制交叉轴（cross axis）上的对齐，即与主轴垂直的方向（row 时是垂直方向）。很多人调了半天没效果，其实是把两个属性用反了——比如想让子元素垂直居中却去改 justify-content。
常见取值的实际表现和陷阱
两者都支持 flex-start、flex-end、center、stretch、baseline 等值，但行为有关键差异：
-
stretch是align-items的默认值，会让子元素在交叉轴上拉满（除非子元素设置了固定高度/宽度）；而justify-content默认是flex-start，不会拉伸 -
baseline在align-items中有用（按文字基线对齐），但在justify-content中无效，直接被忽略 - 如果子元素设置了
align-self，它会覆盖容器级的align-items，但不影响justify-content
当 flex-direction 改为 column 时，两个属性的效果翻转
一旦设置 flex-direction: column，主轴变成垂直方向，此时：
-
justify-content: center→ 垂直居中（原来水平方向的居中逻辑现在作用于 Y 轴） -
align-items: center→ 水平居中（原来垂直方向的居中逻辑现在作用于 X 轴） - 别硬记“justify 是水平、align 是垂直”，要盯住主轴/交叉轴的定义
为什么有时 align-items 不生效？几个高频原因
最常遇到的不是语法错，而是布局前提不满足：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex或display: inline-flex—— 这俩属性只对 flex 容器有效 - 子元素本身有
float、position: absolute或display: block且高度为 0 ——align-items: stretch就没东西可拉伸 - 容器没有明确的交叉轴尺寸（比如
flex-direction: row时，父容器高度为auto且子元素没撑高），align-items: center看起来像没动，其实是“居中到了一个看不见的高度里”
调试时建议先给容器加个 border 和明确 height（如 min-height: 100vh），再观察对齐是否真实发生。
