要实现稳定的上下结构flex布局，需设flex-direction: column、父容器有明确高度（如100vh）、子元素合理分配flex比例，并配合justify-content和align-items控制对齐。
要实现上下结构的 Flex 布局，关键确实是将 flex-direction 设为 column，但这只是基础。真正让“上下结构”稳定、可用，还需配合容器高度、子元素尺寸和对齐方式等设置。
父容器必须有明确高度
Flex 的 column 方向默认按内容撑高，若父容器没设高度（如 height: 100vh 或固定值），子元素可能挤在一起或无法铺满屏幕。
- 常见做法：给父容器设
height: 100vh（视口全高）或min-height: 100vh - 若嵌套在其他布局中，需确保其父级也传递了高度（比如 body 和 html 需设
height: 100%）
子元素按需分配垂直空间
仅设 flex-direction: column 不会自动拉伸子项。要让上区固定、下区自适应，常用组合是：
- 顶部区域：设固定高度（如
height: 60px）或用flex: 0 0 auto - 底部区域：用
flex: 1占满剩余空间（前提是父容器有高度） - 中间内容区也可设
flex: 1，实现“头部+内容+底部”的经典三段式
注意默认对齐行为
column 下，justify-content 控制的是**主轴（纵向）**上的对齐，即控制上下元素的间距；align-items 控制**交叉轴（横向）**，影响左右居中。
立即学习“前端免费学习笔记（深入）”；
- 想让上下模块之间留空？用
justify-content: space-between - 想让所有子项水平居中？加
align-items: center - 避免文字被截断？记得给子元素设
overflow: hidden或word-break: break-word（尤其内容区）
不复杂但容易忽略。核心就是：设 column + 给父容器高度 + 合理分配子项 flex 比例。