根本原因是父容器缺乏可测量的非auto高度基准，导致align-items: stretch失效；需为其直接父级设min-height（如100vh或300px），并确保子元素未写height/max-height、嵌套flex容器也锚定高度。
Flex容器高度坍塌后无法自动撑起，根本原因不是Flex没生效，而是高度计算链断在了某一层——没有可测量的、非auto的高度基准，align-items: stretch就只是摆设。
父容器的直接父级必须设min-height
Flex容器自己不“凭空造高”，它只响应上层给的可用空间。如果它的直接父元素是height: auto（默认值），那无论子项怎么写flex: 1或align-self: stretch，都无高度可分。
- 优先用
min-height而非height：比如min-height: 100vh或min-height: 300px，既保底又允许内容溢出时自然拉高 - 移动端慎用
100vh：iOS Safari 地址栏缩放会导致视口高度跳变，建议降级为min-height: 100dvh（2026年已全平台支持） - 别在
html和body上漏掉高度约束：若Flex容器嵌套较深，常卡在这两级，加html, body { min-height: 100% }能堵住常见断点
align-items: stretch失效的三个硬条件
这个属性默认启用，但只要以下任一条件成立，它就完全不工作：
- 父容器自身高度为
auto（即没设height/min-height） - 子元素写了
height、max-height或align-self: flex-start等覆盖值 - 子元素内部是另一个Flex容器，且该子容器也未被锚定高度，形成嵌套塌陷链
调试时看浏览器开发者工具的Computed面板，重点查子元素的align-self是否为auto或stretch，而不是只盯CSS规则里有没有写align-items。
子元素用了flex-direction: column怎么办
主轴一变，align-items就不管高度了——它转而控制水平对齐。此时想让某个子项占满剩余高度，不能靠align-items，得换思路：
- 用
flex: 1（等价于flex: 1 1 0）：适用于单个主内容区，比如侧边栏+主区域布局中的主区域 - 避免混用
height: 100%：在column流中，它极易触发循环依赖，尤其当父容器高度仍未锚定时 - 单子项填满+居中：用
margin: auto，比flex: 1更轻量，且同时实现垂直/水平居中与撑满
别忽略内容本身对高度的贡献
有时容器“看起来”没撑开，其实是内容没产生有效高度：
- 纯
inline内容（如文本、<span></span>、图标字体）不会强制父容器有高度，除非它们被包裹在display: block元素里，或父容器设了line-height/padding - 浮动子元素（
float: left）会脱离文档流，父容器感知不到其尺寸；现代方案应直接改用display: flex或display: grid，而非清除浮动 - 绝对定位（
position: absolute）子元素也不参与高度计算，若需撑高，得用其他非脱离流的元素“垫高”
真正卡住人的，从来不是Flex语法多难，而是忘了高度必须从某一层“真实存在”的min-height或height开始向下传递——浏览器不猜，只算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
