align-items 在无明确交叉轴尺寸的 flex 容器中不生效，因其依赖容器在交叉轴上有可分配空间；主轴为 row 时需显式设置 height/min-height，为 column 时则需宽度约束。
align-items 为什么在没有高度的 flex 容器里不生效
align-items 控制的是子元素在交叉轴（cross axis）上的对齐方式，但它依赖容器在该轴上有明确的“可分配空间”。Flex 容器默认主轴是水平（flex-direction: row），交叉轴就是垂直方向——此时 align-items 的效果要靠容器自身的高度来撑开空间。如果容器高度由内容撑开（即 height: auto，且无其他限制），那它实际高度就等于子元素最高项的高度，没有“多余空间”供对齐算法分配，align-items 就自然没表现。
哪些情况会让 align-items 看起来“失效”
常见误判场景不是属性写错了，而是容器缺乏约束：
- 父容器未设置
height、min-height或max-height - 容器被设为
display: flex，但同时又用了align-content: stretch（这个只对多行 flex 生效，单行无效） - 子项用了
align-self: auto（继承align-items），但某个子项显式设置了align-self: flex-start，覆盖了整体行为 - 容器设置了
flex-direction: column，此时交叉轴变成水平方向，align-items控制左右对齐——但开发者常误以为它还管上下，结果调错轴向
快速验证和修复方法
用浏览器开发者工具检查容器 computed height：如果显示 auto 且数值等于子项最大高度，基本就是这个问题。修复只需给容器一个明确的交叉轴尺寸：
/* 假设主轴是 row，想让子项垂直居中 */
.flex-container {
display: flex;
align-items: center;
height: 200px; /* ✅ 显式高度 */
/* 或 */
min-height: 200px; /* ✅ 更稳妥，允许内容撑高 */
/* 或 */
height: 100vh; /* ✅ 视口高度 */
}注意：height: 100% 通常无效，因为百分比高度依赖父容器有明确高度，容易形成链式缺失。
立即学习“前端免费学习笔记（深入）”；
flex-direction 变更后 align-items 的行为变化
一旦把 flex-direction 改成 column，主轴变垂直，交叉轴就变成水平方向，align-items 对应的就不再是上下对齐，而是左右对齐：
-
align-items: center→ 子项水平居中 -
align-items: flex-end→ 子项右对齐 - 此时若想控制垂直对齐，得用
justify-content（主轴对齐）
很多人调了半天 align-items 发现“不动”，其实是没意识到轴向已切换——打开开发者工具看 layout 面板里的 flex 轴标注最直接。
交叉轴尺寸必须存在，align-items 才有空间可“对齐”；没有高度（或宽度）的容器，不是属性失效，是根本没留下对齐所需的余量。
