align-items: stretch没起作用是因为父容器缺少明确的交叉轴尺寸（如height/min-height），或子元素设置了height、min-height、align-self等限制；flex-direction: column时它控制宽度而非高度。
align-items: stretch 为什么没起作用
它其实起了作用——只是你没给它“可拉伸的空间”。align-items: stretch 默认开启，但它只在父容器有**确定的交叉轴尺寸**时才生效。比如 flex-direction: row（默认）时，交叉轴是垂直方向，它需要父容器有明确的 height、min-height 或 max-height；如果父容器高度是 auto（由内容撑开），那 stretch 就无高度可拉，子元素自然塌陷。
父容器没高度是最常见原因
Flex 不会凭空“生成”父容器高度，它只分配已有空间。90% 的撑不满问题都卡在这一步：
-
html和body没设height: 100%，导致height: 100vh在子级里失效 - 父容器是普通
div，没写任何高度相关声明 → 计算高度为auto - 父容器被
position: fixed或absolute限制了上下边界（如top: 0; bottom: 0），但未显式设height，浏览器虽能算出高度，但某些旧版 Firefox 会误判为不可拉伸
子元素自己“关掉了”stretch
只要子元素写了以下任一声明，align-items: stretch 就直接放弃控制：
-
height、min-height或max-height（哪怕只是min-height: 0） -
position: absolute或fixed—— 完全脱离 flex 流，不再参与对齐计算 -
align-self: flex-start、center等非stretch值（包括显式写align-self: auto，部分 Safari 会干扰）
特别注意：height: 100% 看似想撑高，实则常导致循环依赖：父容器高度来自子元素，子元素又依赖父容器高度，结果算出来是 0。
flex-direction: column 下容易搞反主轴和交叉轴
当设了 flex-direction: column，主轴变成垂直方向，交叉轴变成水平方向。align-items: stretch 此时控制的是子元素的**宽度**，不是高度。想让子元素填满父容器高度，得靠：
- 父容器有明确高度（如
min-height: 100vh） - 子元素用
flex: 1（等价于flex: 1 1 0），让它在主轴上均分可用空间 - 避免对子元素写
height或justify-content错误地挤占空间
嵌套 flex 容器也得小心：内层子元素若没设 min-height: 0，其默认 min-height: auto 会阻止向下传递拉伸行为，导致再下一层撑不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
