子元素背景色没铺满是因为 align-items: stretch 失效，根源在于父容器无明确高度、子元素显式设置了高度或 flex-direction 为 column 时方向误判，需确保父容器有高度且子元素未限制交叉轴尺寸。
子元素背景色没铺满，不是 background 写错了，而是它根本没高度可填——align-items: stretch 被悄悄禁用了。
父容器没高度，stretch 就没参照系
Flex 的 align-items: stretch 不是魔法，它只能把子元素拉伸到父容器当前的交叉轴尺寸。如果父容器 height 是 auto（比如普通 div 未设高），那它的高度就由内容撑开；内容又没高度，结果就是子元素“想拉也无处可拉”。
- 给父容器加
min-height: 100vh或height: 400px—— 明确提供交叉轴基准 - 若父容器在
body内，必须同步给html和body加height: 100%，否则height: 100%在子级算出来是0px - 避免只写
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 会“看起来”没填满
即使 align-items: stretch 生效了，视觉上背景仍可能露白：一种是子元素脱离了 flex 流，另一种是边框/内边距没被算进拉伸范围。
-
position: absolute的子元素完全脱离 flex 布局，align-items对它无效；如需覆盖层，改用inset: 0+z-index，并确保父容器position: relative - 检查是否漏写了
box-sizing: border-box，导致padding外推、背景色被“截断”在 content 区域 - 临时加
border: 1px dashed blue到子元素，观察边框是否真撑满父容器交叉轴
最常被忽略的点是：父容器有了高度，子元素也删了 height，但背景还是只包文字——这时候该去开发者工具里看 computed height，确认是不是图片加载延迟、字体未就绪，或者 margin 折叠意外压缩了可用高度。
