flex容器背景色未撑满，八成因align-items被设为center等值覆盖默认stretch；需改回stretch或删除该声明，并确保父容器有明确高度、子元素无height/min-height限制。
Flex容器里背景色没撑满，八成是align-items被显式设成了center、flex-start这类值，覆盖了默认的stretch行为——它本该让子项在交叉轴上自动拉高填满容器高度。
为什么align-items: center会让背景“短一截”
当flex-direction: row时，交叉轴是垂直方向，align-items就管子元素的高度对齐方式。center会让子元素只包裹内容（比如一行文字或一个input），高度可能只有20px；而stretch才让它拉伸到和兄弟元素一样高。背景色自然跟着元素高度走，不是“画不满”，是“没地方画”。
-
align-items: stretch是Flex默认值，删掉显式声明反而更安全 - 如果父容器有固定高度（如
height: 300px），但子元素写了height: auto，stretch仍能生效 - 子元素若设了
align-self: flex-start，会覆盖父级align-items，同样导致拉伸失效
align-items之外还要检查什么
光改align-items还不够，下面这些点漏一个，背景照样不顶天立地：
- 子元素不能有
height或min-height（row布局下），否则直接锁死高度 - 图片等替换元素要加
height: auto，否则浏览器按stretch强行撑高，但图像本身可能变形 - 父容器得有明确高度来源：比如
min-height: 100vh，或被上级用flex: 1约束住，否则整个Flex容器高度就是0 - 用
outline: 1px solid red临时替代background-color，一眼看清元素真实渲染区域
响应式场景下容易忽略的坑
在媒体查询或移动端适配时，align-items可能被不同断点下的CSS规则覆盖，尤其注意：
- 不要在
@media里只写align-items: center却不重置其他断点，容易残留旧值 - 如果子元素用了
flex: 1，它依赖父容器主轴有剩余空间，而align-items控制的是交叉轴，两者别混为一谈 - 某些UI库（如Bootstrap）的工具类会注入
align-items: stretch，但自定义样式权重更高，可能把它干掉
真正要盯住的从来不是“怎么加align-items”，而是“有没有哪条规则悄悄把它弄没了”——尤其是那些看起来无关紧要的height、align-self、或嵌套在@media里的半截声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
