align-items: stretch 失效主因是父容器无明确高度、子元素设 height/min-height、使用 absolute 定位或嵌套 flex 中漏设 flex: 1/min-height: 0；column 布局下它只控制水平拉伸，撑高需 justify-content 或 flex: 1。
align-items: stretch 为什么没效果
它默认就生效，但不是“万能拉伸开关”。父容器没高度、子元素设了 height 或 min-height、用了 position: absolute，都会让 align-items: stretch 彻底失效。
常见错误现象：.container 背景色只显示一行文字高，子元素明明有内容却“压不下去”；或者加了 align-items: stretch 后毫无变化。
- 父容器必须有可计算的高度来源，比如
height: 100vh、height: 400px，或从祖先继承（注意：html和body得先设height: 100%） - 子元素不能写
height: 100%——父容器没高度时，100% 就是 0 -
min-height: 0看似中性，实则会关闭 stretch 行为，尤其在嵌套 flex 中容易误加
flex-direction: column 时别用 align-items 控制高度
竖排布局下，主轴变垂直，交叉轴变水平。align-items 管的是水平对齐，和“撑高”无关。此时子元素想填满父容器高度，得靠 justify-content 或子项自身约束。
错误写法：.container { flex-direction: column; align-items: stretch; } —— 这只会让子项水平拉宽，对高度毫无影响。
- 若需子项均分高度，用
flex: 1（等价于flex-grow: 1） - 若父容器有明确高度，子项又需自适应内容高度，改用
justify-content: space-between或flex: 0 0 auto+min-height - 避免在 column 布局里给子项设
height: 100%，它不会向上追溯到父容器高度
嵌套 Flex 容器要逐层传递弹性约束
外层容器设了 height: 100vh，中间一层只写了 display: flex，子项依然不撑高——因为中间层没声明“我要占满可用空间”，它只是个普通块级容器。
典型结构：.root → .parent → .item，其中只有 .parent 是 flex，.root 是 block，默认不把高度传下去。
-
.root必须设display: flex或display: inline-flex，才能为子项提供弹性上下文 -
.parent需加flex: 1（或flex-grow: 1），否则它不会主动拉伸 - 如果
.item内部还有 flex 子项，记得也加min-height: 0，否则默认的min-height: auto会阻止向下拉伸
绝对定位和 overflow:hidden 是隐形杀手
position: absolute 的子元素完全脱离 flex 流，既不参与交叉轴拉伸，也不贡献父容器高度；overflow: hidden 则可能把溢出部分裁掉，让父容器“误以为”没内容可撑。
错误信号：父容器背景色只覆盖顶部一小块，但开发者检查 DOM 发现子元素 DOM 结构正常、内容也存在。
- 禁用
position: absolute，改用margin: auto、align-self或justify-content实现定位 - 临时移除
overflow: hidden或overflow: auto，确认是否是它截断了渲染区域 - 检查是否有
max-height限制了父容器上限，哪怕值很大，也会压制 stretch 行为
真正难缠的点往往不在 flex 属性本身，而在父容器的高度来源是否可靠、子元素是否意外脱离流、以及嵌套层级间有没有漏掉 flex: 1 或 min-height: 0 这类“承上启下”的声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
