flex子项未设高度导致background-size:cover失效，因cover依赖容器宽高计算缩放比；需确保高度链完整（html/body→父容器→子项均设height或min-height），并注意align-items和background-position影响。
background-size: cover 在 Flex 容器里不拉伸，根本不是它的问题，而是 Flex 子项没拿到可计算的高度。
Flex 子项没设高度，cover 就只能按“0px”缩放
Flex 布局默认不给子项分配高度，除非你明确告诉它“该占多高”。background-size: cover 依赖容器的 width 和 height 计算缩放比，如果子项的 computed height 是 0px（常见于未设高、也无内容撑开时），图片自然缩在左上角。
- 检查子项是否写了
height: 100%或min-height: 100vh—— 单靠flex: 1不够，它只影响剩余空间分配，不保证高度继承 - 确认父级 Flex 容器设置了
height或min-height，否则子项的100%没参考系 - 用 DevTools 查看该元素的
Computed面板，重点看height值是不是0px或auto
align-items 和 align-self 会悄悄“压扁”背景区域
Flex 默认 align-items: stretch，但一旦子项写了 align-self: flex-start，或父容器设了 align-items: flex-start，子项就会收缩高度，导致背景图作用域变小。
- 显式写
align-items: stretch覆盖默认行为（尤其在嵌套 Flex 中） - 避免对背景图容器加
align-self，除非你真需要它“不拉满” - 如果容器内有文字或其他内容，它们可能把高度撑开，但 cover 仍按这个“内容高度”算，不是你想要的视口高度
background-position 决定裁哪一块，不是 cover 决定的
background-size: cover 只管“缩多大”，真正决定“显示图中哪部分”的是 background-position。默认 50% 50% 居中，但人物照常需 top center，风景图可能要 bottom center。
- 别用像素值（如
20px 30px），响应式下完全失效；优先用top/center/bottom+left/center/right - 百分比值（如
30% 70%）更精细，但必须配合设计稿安全区反复验证 - 移动端竖屏下，
center center很容易切掉人脸，top center更稳妥
iOS Safari 的 Flex + cover 组合最容易掉链子
iOS Safari 对 Flex 子项继承 height: 100% 极其敏感：只要中间某一层没设高（比如一个 display: flex 的 div 没写 height），整个高度链就断了，cover 会基于错误高度缩放，看起来像纵向拉伸。
- 从
html和body开始写：html, body { height: 100%; margin: 0; } - 每层 Flex 父容器都必须显式设
height: 100%或min-height: 100vh - 真机测试不可跳过，模拟器不触发地址栏收起/软键盘弹出导致的视口重算
最常被忽略的点：Flex 容器里的背景图能否填满，90% 取决于高度链是否完整，而不是 background-size 写得对不对。cover 本身很稳定，它只是忠实地执行“在给定盒子里缩放并裁剪”——盒子尺寸错了，结果一定错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
