父容器高度为auto且未被撑开或约束，align-items:stretch无参照基准可拉伸；子元素设height/min-height、align-self覆盖、absolute定位或flex-direction:column时误用均导致失效。
为什么写了 display: flex 还是不拉伸
根本不是 align-items: stretch 失效，而是它没东西可拉——父容器高度为 auto，且没被内容撑开或外部约束。浏览器不会“猜”你要多高，只按规则填满已有高度。
常见现象：Flex 容器背景色只包住文字高度，子元素边框/阴影压不扁，outline: 1px solid red 一看就发现根本没拉伸。
- 检查父容器是否设置了
height、min-height（如min-height: 100vh）或被上层flex: 1分配了空间 - 若父容器在
body内，确认html和body有height: 100%，否则子级height: 100%会失效 - 避免用
height: auto或留空高度声明——这不是 Flex 的锅，是盒模型基础规则
子元素写了 height/min-height 就不拉伸了
align-items: stretch 只对“未显式设置交叉轴尺寸”的子元素生效。只要子项写了 height、min-height 或 max-height，拉伸逻辑立刻让位，以你写的值为准。
典型误操作：调试时随手加 height: 100% 想“撑满”，结果反而锁死了 stretch 行为，还可能引发循环依赖（尤其父容器高度本身来自内容）。
- 删掉所有子元素的
height、min-height、max-height（除非真有业务约束） - 想等高又怕内容少时留白？用
flex: 1替代——它清空原始基准（flex-basis: 0），强制按比例分剩余空间 - 多个子项都设
flex: 1，它们均分；某项想占更多，改flex: 2即可
align-self 覆盖了 align-items: stretch
align-self 优先级高于 align-items。只要子元素显式写了 align-self: flex-start（或 center、baseline 等），它就脱离拉伸，按自身逻辑对齐。
容易被忽略的是：UI 组件库或重置样式可能悄悄给子元素注入 align-self，比如某些卡片组件默认带 align-self: stretch 以外的值。
- 调试时直接看浏览器开发者工具的 **Computed** 标签页，查
align-self值是不是stretch - 恢复默认拉伸，把子元素的
align-self改成auto（这是唯一能回退到父级align-items的方式） - 绝对定位子元素（
position: absolute）彻底脱离 Flex 流，align-items对它完全无效
flex-direction: column 下 stretch 不管高度
方向一变，主轴和交叉轴就互换。flex-direction: column 时，主轴是垂直方向，align-items 控制的是**水平方向对齐**（即子元素宽度行为），不是高度。
此时你想让子元素“填满父容器高度”，关键不在 align-items，而在：
- 确保父容器有明确高度（
height或min-height） - 给子元素设
flex: 1或height: 100%（注意：后者需每一层父元素都有明确高度才链式生效） - 别指望
justify-content: stretch——CSS Flex 中根本不存在这个值
真正容易被忽略的点：很多所谓“column 下等高”需求，其实该用 flex-direction: row + flex-wrap: wrap 配合 align-content: stretch（作用于多行之间），或者直接切 Grid —— Flex 的设计初衷就不是为列方向等高服务的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
