align-items 在 flex 容器中不起作用的主因是父容器未设置 display: flex 或 inline-flex；它仅对 flex 容器生效，控制交叉轴对齐，效果受 flex-direction 和父容器高度影响。
align-items 在 flex 容器里不起作用？检查父容器是不是真的 flex
很多人写 align-items: center 没反应，第一反应是属性写错了，其实大概率是父元素根本没开启 flex 布局。CSS 的 align-items 只对 display: flex 或 display: inline-flex 的容器生效，对 block、inline 甚至 grid 都无效。
常见错误现象：
子元素垂直方向完全不移动，看起来像没加样式；开发者工具里能看到 align-items 被划掉（表示不适用）。
- 确认父容器设置了
display: flex（不是flexbox、不是flex-box） - 如果用了
float、position: absolute或display: table等老式布局，align-items一律失效 - 注意：
align-items控制的是交叉轴（cross axis）对齐，横向 flex 容器的交叉轴是垂直方向，纵向 flex 容器则是水平方向
align-items 和 justify-content 到底谁管哪条轴？
容易混淆的根本原因是 flex 主轴（main axis）方向由 flex-direction 决定，而 align-items 始终作用于与之垂直的交叉轴。换句话说：justify-content 管主轴，align-items 管交叉轴——但主轴方向不是固定的。
- 默认
flex-direction: row→ 主轴水平 →justify-content控制左右，align-items控制上下 -
flex-direction: column→ 主轴垂直 →justify-content控制上下，align-items控制左右 - 别硬记“align-items 是垂直居中”，它可能是水平居中，取决于
flex-direction
子元素高度为 auto 时，align-items: center 为什么没效果？
当 flex 子项没有明确高度（比如只写了文字、图片或 height: auto），且父容器高度也没设（比如靠内容撑开），align-items: center 实际上是有计算的，但因为容器“没高度”，视觉上就看不出居中——它把子项放在了“一个无限高容器”的中间，结果还是贴顶。
- 解决方法：给父 flex 容器设置明确高度，比如
height: 200px或min-height: 100vh - 或者用
align-content: center（仅多行 flex 有效）或margin: auto（对单个子项更直接） - 注意：
align-items不会改变容器自身高度，它只是分配已有空间
IE11 对 align-items 的兼容性坑
IE11 支持 align-items，但有俩经典 bug：一是遇到 flex-wrap: wrap 时行为异常；二是对 align-items: stretch（默认值）在某些嵌套场景下会忽略子项的 min-height。
- 如果目标用户包含 IE11，建议避免依赖
align-items做关键布局，改用margin: auto或display: table-cell + vertical-align: middle - 测试时务必在真实 IE11 环境下验证，浏览器模拟器常不准
-
align-items: flex-start和flex-end在 IE11 中相对稳定，center和baseline最容易出问题
真正卡住人的，往往不是不会写 align-items，而是忘了它背后那整套 flex 轴向逻辑和容器约束条件。一上来就调样式，不如先盯三秒父元素的 display 和 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
