flex容器高度塌陷的根本原因是父容器缺乏高度来源，子元素未提供有效高度支撑；需通过min-height、内容填充或父级高度继承来解决。
Flex容器高度塌陷，本质是子元素没撑开父容器，不是Flex本身“坏了”，而是你没给它足够信息去计算高度。
子元素没设高度或没内容时，flex 容器默认不占空间
常见现象：display: flex 的 div 在浏览器里看不见、无法点击、被其他元素覆盖——其实它高度是 0px。
- Flex容器自身没有固有高度（比如没设
height、min-height，也没继承父级高度） - 所有子项都是
flex且没显式设高（比如没内容、没height、没min-height），或者用了flex: 0 0 auto但内容为空 - 父级没设
height: 100%或vh单位，导致百分比高度失效
用 min-height 而不是 height 控制基础高度
硬写 height: 200px 会截断内容；固定高度在响应式场景下极易出错。更安全的做法是用 min-height 给底线保障。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
min-height: 100vh：让容器至少占满视口，适合全屏布局 -
min-height: 400px：设一个合理下限，避免空容器塌缩 - 配合
height: fit-content或留空，让内容自然撑高（注意：IE 不支持fit-content）
子项用 flex: 1 时，必须确保父容器有可分配的高度来源
flex: 1 是缩写，等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0。关键在 flex-basis: 0 —— 它会让子项“从零开始分配”，如果父容器没高度，就真分不到任何空间。
- 父容器必须有明确高度（如
height: 500px）或最小高度（min-height: 500px） - 若父容器高度依赖内容（比如嵌套在另一个 Flex 中），需逐层检查上层是否也塌了
- 调试技巧：临时加
border: 1px solid red到父容器，一眼看出是否真塌陷
Flex方向为 column 时，align-items 不影响高度，但 justify-content 可能“藏掉”内容
当 Flex 容器设了 flex-direction: column，且子项高度总和小于容器高度时，justify-content: center 或 space-between 会让子项居中或分散——但此时容器高度仍由自身决定，不是子项撑出来的。
- 如果子项实际高度为
0（比如空div），即使设了justify-content: center，容器依然塌陷 -
align-items: stretch（默认值）会让子项在交叉轴拉伸，但只对有明确尺寸的轴生效；主轴（column 的垂直方向）不拉伸 - 想靠子项撑高？得让它有内容、
min-height，或设flex: 1并确保父容器有高度来源
真正卡住人的地方，往往不是 Flex 属性写错了，而是忘了高度需要“源头”——要么自己设，要么从父级继承，要么靠内容顶起来。空容器 + 无约束 + flex: 1，等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
