align-items实现交叉轴对齐的关键是满足三个底层条件：父容器必须设display:flex或inline-flex、交叉轴方向由flex-direction决定（row时垂直对齐，column时水平对齐）、子元素不能被float/absolute等脱离文档流；center等值生效还需父容器有明确高度，且不被align-self覆盖。
用 align-items 实现交叉轴对齐，关键不是“怎么写这个属性”，而是确保它生效的三个底层条件都满足——父容器是 flex、交叉轴方向明确、子元素没被意外干扰。
先确认父容器是不是真正的 Flex 容器
很多人写了 align-items: center 却没效果，第一反应是属性写错了，其实大概率是父元素根本没开启 Flex 布局：
- 必须给父元素设置
display: flex或display: inline-flex，只写align-items没用 - 子元素如果用了
float、position: absolute或display: block强制脱离文档流，也会退出 Flex 项目身份，不再受align-items控制 - 按钮、
<span>等内联元素默认不能设高度，想让它当 flex 容器，得先加display: inline-flex
搞清交叉轴方向由 flex-direction 决定
align-items 总是对齐交叉轴，但“垂直还是水平”，取决于主轴朝哪边：
- 默认
flex-direction: row→ 主轴水平 → 交叉轴垂直 →align-items控制上下对齐 - 设了
flex-direction: column→ 主轴垂直 → 交叉轴水平 →align-items就变成控制左右对齐 - 别指望它同时搞定水平+垂直居中；水平靠
justify-content，垂直靠align-items，两者配合才完整
常见取值的实际表现和避坑点
不同值在视觉上差异明显，但容易因细节误解效果：
立即学习“前端免费学习笔记（深入）”；
-
center：最常用，但要求父容器有明确高度（比如height: 200px或min-height: 100vh），否则容器高度为 0，居中“看不见” -
stretch（默认）：子元素会拉伸填满交叉轴，但如果子元素自己设了height或min-height，就不会被拉伸 -
flex-start/flex-end：对应顶部/底部对齐（row下），注意它对齐的是“内容盒”边缘，不是 padding 边缘 -
baseline：适合图标+文字组合（如按钮），按文字基线对齐，但对纯图片或 SVG 效果不稳定，慎用
调试时快速定位问题的方法
对齐没反应？别猜，直接验证三件事：
- 给父容器加
border: 1px solid red，看它有没有实际高度和宽度 - 给子元素加
background: #eee和临时height: 40px，确认它是否真被当作 flex item 渲染 - 检查子元素是否设置了
align-self—— 它会覆盖父级align-items，相当于“单个元素开小灶” - 如果是多行布局（
flex-wrap: wrap），align-items仍管每行内的对齐；整行上下居中要用align-content: center
