Flex子元素不撑满父容器高度，是因为父容器未设明确高度、子元素设置了position: absolute或height/min-height/max-height，或flex-direction为column时误用align-items控制高度。
flex子元素不撑满父容器高度，是因为父容器没设高度
Flex布局里align-items: stretch确实默认生效，但它的“拉伸”前提是父容器有明确的高度（比如height: 300px或min-height: 100vh）。如果父容器高度由内容撑开，那子元素再怎么stretch也无高度可撑。
常见错误现象：display: flex的容器看着“空”，子元素只显示文字高度，背景色/边框都压不扁。
- 检查父容器是否设置了
height、min-height或max-height - 若父容器在body里，记得给
html和body加height: 100%，否则height: 100%在子级无效 - 避免用
height: auto或不设高度——这不是flex的问题，是CSS盒模型基础规则
align-items: stretch对绝对定位子元素失效
一旦子元素设了position: absolute，它就脱离了flex流，不再参与align-items计算。此时即使父容器高度固定，该子元素也不会被拉伸。
使用场景：想让某个子元素全高覆盖（比如遮罩层），但又希望其他子元素正常flex排列。
- 不要对需要stretch的子元素加
position: absolute - 如必须绝对定位，改用
inset: 0配合z-index，并确保父容器position: relative - 注意：
inset在旧版Safari中需写成top: 0; right: 0; bottom: 0; left: 0
子元素设了height/min-height会阻止stretch生效
align-items: stretch只在子元素**未显式设置块轴尺寸**时起作用。只要写了height、min-height或max-height，浏览器就认为你已接管高度控制，自动放弃stretch。
容易踩的坑：调试时随手加height: 100%想“撑满”，结果反而锁死了stretch逻辑。
- 删掉子元素的
height、min-height、max-height（除非真有约束需求） - 想让子元素随父容器等高，优先靠
align-items: stretch+ 父容器有高度，而不是子元素写height: 100% -
height: 100%在flex子元素里常导致循环依赖，尤其父容器高度本身来自内容时
flex-direction: column下，align-items控制的是宽度，不是高度
方向一变，主轴和交叉轴就互换。flex-direction: column时，主轴是垂直的，align-items管的是**水平方向对齐**（即子元素的宽度行为），而高度由justify-content或flex属性影响。
如果你的目标是让column布局下的子元素“填满父级高度”，关键不在align-items，而在：
- 确保父容器有明确高度
- 子元素用
flex: 1（等价于flex: 1 1 0），才能均分剩余空间 - 或者用
height: 100%，但前提是父容器高度确定且子元素未脱离文档流
这时候看控制台computed值，align-items再怎么设成stretch，对子元素高度也没影响——它只决定这些子元素在横向上怎么排。
复杂点在于：flex的轴向语义和你的直觉可能相反，而浏览器不会报错，只会安静地不按你想的做。盯紧flex-direction和当前控制的是哪根轴，比调参数更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
