flex-direction: column 是实现三行式布局（上下固定、中间自适应）最直接可靠的方式，因其主轴为垂直方向，配合 flex: 1 可让中间区域天然撑满剩余高度，无需 calc() 或绝对定位，且响应式友好、逻辑直观。
Flex-direction: column 是实现三行式布局（上下固定、中间自适应）最直接可靠的方式，无需计算高度、不依赖文档流顺序、响应式友好。
为什么用 flex-direction: column 而不是 row？
三行布局本质是垂直方向的分层：header + main + footer。用 flex-direction: column 让子元素按列从上到下排列，配合 flex: 1 可让中间区域自动撑满剩余空间，比 calc() 或绝对定位更健壮。
- 若用
flex-direction: row，必须把整页当“一行”处理，逻辑反直觉且易出错 -
column下的flex: 1作用于高度，天然适配“填满剩余垂直空间”这一需求 - 父容器只需设
height: 100vh或明确高度，不需要给子项设height
关键 CSS 写法和参数含义
核心在于父容器设为 flex 列布局，并控制中间项的伸缩行为：
- 父容器必须有明确高度（如
height: 100vh），否则flex: 1无参照 - header 和 footer 用固定高度（如
height: 60px）或flex: 0 0 auto防止被压缩 - main 区域用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），它会占据所有剩余高度 - 避免在 main 上设
height或min-height，否则会干扰 flex 计算
示例：
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
<p>header {
height: 60px;
background: #333;
}</p><p>main {
flex: 1;
overflow-y: auto; /<em> 内容超长时滚动，不撑破容器 </em>/
background: #f9f9f9;
}</p><p>footer {
height: 40px;
background: #666;
}</p>
常见错误：中间内容不自适应或溢出
这不是 Flex 本身的问题，而是几个典型配置冲突导致的：
-
main里子元素用了height: 100%，但父级没设高度（flex: 1不等于height: 100%）→ 改用height: 100%前先确保父级有确定高度 - header/footer 没限制
flex-shrink，窗口缩小时被压缩 → 显式写flex: 0 0 60px - 父容器未设
height，只靠内容撑开 → 浏览器无法计算“剩余空间”，flex: 1失效 - 用了
overflow: hidden在 main 上，又没设min-height→ 小屏下内容被截断，应改用overflow-y: auto
兼容性和边界注意点
现代浏览器对 flex-direction: column + flex: 1 支持极好（Chrome 29+/Firefox 20+/Safari 9+），但仍有两个容易被忽略的细节：
- iOS Safari 旧版本（100vh 在地址栏收起/展开时会跳变 → 可改用
100dvh（2023 年后支持）或 JS 动态设置 - 如果 header 或 footer 内容高度不固定（比如文字换行），用
flex: 0 0 auto比固定height更安全，但需测试最大高度是否超出预期 - 不要在
main上同时设flex: 1和margin，某些老版 Chrome 会误判剩余空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
