flex容器高度不生效主因是父容器未提供有效高度约束，需逐级确保html、body及各层父容器有明确高度（如height:100vh），并注意align-items对视觉效果的影响。
flex 容器高度不生效的常见原因
直接给 display: flex 的容器设 height 却没效果，通常不是 CSS 写错了，而是父容器没提供有效的高度约束。Flex 容器本身不会凭空撑开高度，它默认遵循「内容高度」或「父容器高度」——如果父容器是 height: auto（比如普通 div），那子 flex 容器的 height: 300px 就可能被忽略，尤其在未设置 align-items 或内部子项未占满时。
必须显式约束父容器高度才能让子 flex 高度生效
flex 容器的 height 不是“绝对指令”，而是“可用空间声明”。它只在父容器有明确高度（px、vh、rem 等固定值）或已通过其他方式（如 min-height + flex: 1）分配了可用高度时才起作用。
- 父容器是
position: absolute？需同时设top/bottom或height - 父容器是
body或html？记得加html, body { height: 100% } - 父容器用了
flex布局？确保其自身有高度来源，或用flex: 1占满剩余空间
align-items 和 min-height 的实际影响
即使设置了 height: 400px，若子项总高度远小于该值且 align-items: flex-start（默认值），视觉上仍像“没撑开”——因为内容贴顶，下方大片空白不明显。这时可改用：
-
align-items: stretch（默认对齐方式，但仅对无显式高度的子项生效） -
align-items: center或flex-end，配合justify-content明确内容位置 - 更稳妥的做法：给 flex 容器加
min-height: 400px，避免内容少时塌陷
注意：align-items: stretch 不会强制拉伸已设 height 的子项，它只作用于 height: auto 的子项。
立即学习“前端免费学习笔记（深入）”；
一个能验证的最小可运行示例
.parent {
height: 100vh;
}
.flex-container {
display: flex;
height: 300px;
background: #eee;
align-items: center;
justify-content: center;
}
.flex-item {
width: 100px;
height: 50px;
background: #007bff;
}
关键点：.parent 必须有 height: 100vh（或其他确定高度），否则 .flex-container 的 height: 300px 在多数情况下会被忽略；align-items: center 让子项居中，立刻看出容器是否真有 300px 高。
真正卡住人的地方，往往不是 flex 属性写错，而是忘了向上逐层检查高度链是否断裂——从 html 开始，每级父容器都得有高度依据。
