Flex子元素撑不开容器高度，是因为父容器缺乏明确高度基准或子元素自身禁用了拉伸：父容器height为auto时stretch无高度可分配；子元素设height/min-height/align-self或position:absolute均会关闭stretch行为；flex-direction:column时align-items控制宽度而非高度，撑高应使用flex:1或justify-content。
Flex子元素撑不开容器高度，不是align-items没生效，而是它根本没“东西”可拉——父容器缺高度基准，或子元素自己关掉了拉伸开关。
父容器没高度，align-items: stretch 就是空转
align-items: stretch 默认就开着，但它不造高度，只分配已有高度。如果父容器 height 是 auto（比如普通 div 未设高），那它的交叉轴尺寸就是 0，子元素再怎么 stretch 也只能填 0。
- 检查
html和body是否加了height: 100%—— 否则height: 100vh在后代里会失效 - 用开发者工具看父容器的
computed height：如果是auto或0px，就直接卡在这儿了 - 避免靠
min-height“触发”拉伸：min-height: 100vh可以，但min-height: auto不行，它不提供拉伸基准 - fixed/absolute 容器若只写了
top: 0; bottom: 0，部分旧版 Firefox 会误判为不可拉伸，显式加height: 100%更稳
子元素写了 height/min-height，就等于拒绝 stretch
只要子元素显式声明了 height、min-height 或 max-height（哪怕只是 min-height: 0），浏览器就会放弃 align-items 的拉伸逻辑，完全按你写的值来渲染。
-
height: 100%看似合理，实则危险：父容器高度未定义时，100% 算出来是 0，还顺手封死了 stretch -
align-self: flex-start或align-self: center会覆盖父级align-items: stretch，优先级更高 - 图片、
iframe等替换元素自带固有尺寸，即使没写height，也可能抑制拉伸；可加height: 100%; min-height: 0;强制参与 - 绝对定位子元素（
position: absolute）彻底脱离 flex 流，align-items对它完全无效
flex-direction: column 时，align-items 控的是宽度
方向一变，主轴和交叉轴就互换。flex-direction: column 下，主轴是垂直方向，交叉轴变成水平方向 —— 此时 align-items: stretch 拉伸的是子元素的 width，跟高度无关。
- 想让子元素在 column 布局下填满父容器高度，得靠
justify-content（主轴对齐）或子元素自身flex: 1 -
flex: 1等价于flex: 1 1 0，它让子元素在主轴（垂直）上均分可用空间，这才是撑高的正解 - 别在 column 布局里写
align-items: stretch并指望它控制高度 —— 它真正在干的事，是把所有子项拉宽到父容器宽度 - 如果子项内还有嵌套 flex，记得给它也加
min-height: 0，否则默认的min-height: auto会阻断拉伸向下传递
嵌套 Flex 容器容易漏掉弹性传递
外层容器设了 height: 100vh，中间一层只写 display: flex，子项照样塌陷 —— 因为中间层没声明“我要占满可用空间”，它只是个普通块级盒子，不会自动继承或拉伸高度。
- 每一层 flex 容器都要主动“要高度”：外层用
height或min-height，中间层加flex: 1（或flex-grow: 1） - 嵌套结构如
.root → .parent → .item，只有.parent是 flex，.root是 block，默认不传高度；需给.root加display: flex或确保它有明确高度 -
overflow: auto失效常因子元素被 stretch “钉死”在固定高度里，内容被压缩无溢出 —— 解法是改用align-self: flex-start或删掉拉伸干扰项，让内容自然撑开 - Chrome 和现代 Firefox 行为一致，但老版 Firefox 在
column+stretch组合下有 bug，遇到兼容问题优先换flex: 1
真正难的不是写对 align-items: stretch，而是判断此刻该拉伸的是谁、在哪个轴、有没有被上层或自身样式悄悄关掉 —— 每一层都得手动确认高度是否真的传下来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
