flex-direction: column 未生效主因是父容器未设 display: flex 或被 float、absolute 等破坏 Flex 上下文；子项不占满高度需用 flex: 1 而非 height；height: 100% 失效常因嵌套中某层缺高度，推荐 min-height: 100vh。
flex-direction: column 为什么没生效
常见原因是父容器没设 display: flex，或者被其他样式（比如 float、position: absolute）干扰了 Flex 上下文。Flex 布局必须显式开启，不能只靠 flex-direction 单独触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父元素有
display: flex或display: inline-flex - 移除可能破坏文档流的属性，如
float、clear - 检查是否被 CSS 重置规则（如某些 UI 库）覆盖了
flex-direction
子元素高度不占满父容器怎么办
默认情况下，Flex 子项不会自动拉伸填满交叉轴（纵向布局中即垂直方向），需要显式设置 align-items 或单个子项的 align-self，但更常用的是让子项自身“撑开”或“拉伸”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器加
align-items: stretch（默认值，通常不用写） - 若想让某个子项占满剩余高度，给它加
flex: 1（等价于flex: 1 1 auto） - 避免对子项设固定
height，否则会和flex冲突；改用min-height或max-height更安全
内容溢出时 height: 100% 失效的典型场景
在嵌套 Flex 容器中，比如 html → body → .app → .main，如果中间某层没设高度，height: 100% 就会断掉，导致最内层无法继承高度，flex: 1 也就没参考基准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保从根开始每层可滚动/需撑高的容器都有明确高度来源：要么是
height: 100vh，要么是父级已设高度 +height: 100% - 更可靠的做法是直接用视口单位：
height: 100vh替代height: 100% - 对最外层 Flex 容器，优先用
min-height: 100vh，兼顾内容超长时的自然扩展
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header { height: 60px; }
.main { flex: 1; overflow-y: auto; }
.footer { height: 40px; }
flex: 1 在纵向布局中的实际行为
flex: 1 不是“占满剩余空间”的魔法指令，而是 flex-grow: 1、flex-shrink: 1、flex-basis: auto 的简写。它的实际高度取决于内容尺寸、父容器剩余空间、以及同级其他 flex 项的 flex-grow 权重。
容易忽略的点：
- 如果所有子项都设
flex: 1，它们会等分剩余空间，不是各自占满 - 若某子项内容本身很高（比如大段文字），
flex: 1不会压缩它，除非同时设flex-shrink: 0或overflow控制 - 在移动端 Safari 中，
flex: 1配合min-height: 0才能正确约束内部滚动区域高度
flex-basis: auto 的解析差异，这三处最容易导致纵向布局“看起来没效果”。 
