子元素背景未填满的根源是父容器无高度导致align-items: stretch失效，需设置父容器height/min-height（如min-height: 100vh），并确保子元素未显式声明交叉轴尺寸（如height/min-height），flex-direction为column时应改用flex: 1而非align-items调高度。
子元素背景没填满，不是 background 没生效，而是元素本身没高度——align-items: stretch 被悄悄禁用了。
父容器没设高度，stretch 就没空间可拉
flex 容器不会凭空生成高度，align-items: stretch 只能拉伸到“已知的交叉轴尺寸”。如果父容器 height 是 auto（比如普通 div），那它高度由内容撑开；内容又没高度，结果就是背景压不下去。
- 给父容器加
height或min-height，例如min-height: 100vh、height: 400px - 若父容器在
body内，记得同步给html和body加height: 100%，否则height: 100%在子级无效 - 避免只写
min-height: 100%—— 百分比高度必须有可计算的父级高度才能生效
子元素写了 height/min-height，stretch 自动放弃
align-items: stretch 只对“未显式设置交叉轴尺寸”的子元素起作用。在 flex-direction: row（默认）下，交叉轴是垂直方向，只要子元素写了 height、min-height 或 max-height，浏览器就认为你接管了高度控制，直接跳过 stretch。
- 删掉子元素上的
height、min-height、max-height（包括min-height: 0） - 别用
height: 100%替代——它依赖父容器已有高度，且在 flex 下易引发循环计算，结果常为 0 - 如需保底高度，改用
min-height: 200px+align-items: stretch，既允许内容更多时自然增高，又不阻断拉伸
flex-direction: column 时，align-items 不管高度
方向一变，主轴和交叉轴就互换。flex-direction: column 下，主轴是垂直方向，交叉轴变成水平方向，align-items: stretch 控制的是子元素的**宽度**，不是高度。此时背景填不满，问题根本不在 align-items。
- 想让子元素填满父容器高度，优先用
flex: 1（等价于flex: 1 1 0%），让它在主轴上均分可用空间 - 确保父容器有明确高度（如
height: 500px或min-height: 100vh） - 避免在 column 布局下还盯着
align-items调高度——那是方向性误判
绝对定位或 box-sizing 不一致也会“看起来”没填满
即使 stretch 生效了，视觉上背景仍可能露白：一种是子元素脱离了 flex 流，另一种是边框/内边距没被算进拉伸范围。
-
position: absolute的子元素完全脱离 flex 布局，align-items对它无效；如需覆盖层，改用inset: 0+z-index，并确保父容器position: relative - 默认
box-sizing: content-box，align-items: stretch拉的是 content 区域高度，padding和border会额外增加；统一加box-sizing: border-box，让背景真正贴边 - 子元素内部有图片或 iframe？它们自带固有尺寸，需额外加
height: 100%+object-fit: cover才能填满
真正卡住的点往往不是没写 align-items: stretch，而是父容器缺高度、子元素偷偷加了 min-height、或者布局方向切到 column 后还指望它管高度——这些细节不查 computed 样式，光看代码很难发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
