align-items没生效的根本原因是父容器未被识别为flex容器，必须显式设置display: flex或inline-flex；其对齐基准是交叉轴的起点到终点之间的对齐线，受容器高度、内容撑开及min-height等影响。
align-items 在 flex 容器中为什么没生效
常见现象是写了 align-items: center，但子元素在垂直方向纹丝不动。根本原因通常是父容器没被识别为 flex 容器——align-items 只对 display: flex 或 display: inline-flex 生效，对 block、grid、table 等完全无效。
实操建议：
- 检查父元素是否显式设置了
display: flex（注意：不能只靠父级是 flex 项目就默认它自己也是 flex 容器） - 确认没有其他 CSS 覆盖了
display值，比如响应式断点里重置成了block - 用浏览器开发者工具的“Computed”面板直接查
display计算值，比看 Styles 面板更可靠
align-items 的取值和实际对齐基准线
align-items 对齐的不是容器上下边，而是“交叉轴的起点到终点之间的对齐线”——这个线的位置取决于容器自身高度是否固定、内容是否撑开、以及是否设置了 min-height 或 height。
典型场景与表现：
-
align-items: center在有明确高度的容器中居中；若容器高度由内容撑开，则等同于flex-start -
align-items: stretch（默认值）会让子项拉伸填满交叉轴，但前提是子项没设置height或min-height -
align-items: baseline按第一行文字基线对齐，对图标+文字混合布局很实用，但需注意字体大小、line-height会影响基线位置
IE11 下 align-items 行为异常怎么办
IE11 对 align-items 支持不完整，尤其在容器设了 min-height 但无 height 时，center 经常失效，表现为全部顶对齐。
兼容处理建议：
- 给 flex 容器加
height: 100%或具体像素值（如height: 400px），避免依赖min-height单独起作用 - 改用
display: table-cell+vertical-align: middle作为降级方案，但要注意 table-cell 不支持margin和某些定位行为 - 避免在 IE11 场景下使用
align-items: baseline，它基本不可靠
align-items 和 align-self 冲突时谁优先
align-self 会覆盖 align-items，但仅对单个 flex 项目生效。容易踩的坑是：给子元素设了 align-self: flex-end，结果发现没变化——大概率是因为该子元素是绝对定位（position: absolute），此时它已脱离 flex 流，align-self 完全无效。
验证与修正：
- 先确认子元素没有
position: absolute或position: fixed - 检查是否被
float影响（虽然 flex 项目上 float 会被忽略，但旧写法残留可能干扰判断） - 如果需要局部调整又不想动
align-items，优先用margin-top/auto配合margin-bottom: auto实现单项目垂直居中（仅适用于单个子项）
对齐线本身看不见，但它真实存在——它由容器尺寸、子项尺寸、以及你有没有触发 BFC 或 shrink-to-fit 行为共同决定。调不对的时候，别只盯着 align-items，先看那条线到底在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
