在 .page 容器上添加以下 CSS 样式：
.page {display: flex;flex-direction: column;min-height: 100vh;
}
具有以下几个显著优点，尤其适用于现代 Web 布局（如单页应用、响应式页面等）：
✅ 1. 轻松实现垂直方向的主轴布局
flex-direction: column将主轴设为从上到下，子元素默认垂直堆叠。- 非常适合典型的网页结构：Header → Main Content → Footer。
<div class="page"><header>顶部导航</header><main>主要内容</main><footer>页脚</footer>
</div>
无需使用 float、position 或复杂的 margin 技巧，语义清晰、结构简单。
✅ 2. 天然支持“粘性页脚”（Sticky Footer）
- 当内容较少时，传统布局中页脚会“悬在页面中间”。
- 使用 Flexbox 可让
<main>自动撑满剩余空间，页脚始终贴底：
.page {min-height: 100vh; /* 至少占满视口高度 */display: flex;flex-direction: column;
}
main {flex: 1; /* 占据剩余所有空间 */
}
✅ 无需 JS，纯 CSS 实现“内容少时页脚在底部，内容多时正常滚动”。
✅ 3. 响应式友好，易于调整子项对齐方式
- 可通过
align-items（交叉轴）和justify-content（主轴）快速控制子元素对齐：.page {align-items: center; /* 水平居中所有子元素 */justify-content: space-between; /* 顶部、中间、底部分布 */ } - 在移动端/桌面端切换布局时，只需修改
flex-direction（如改为row）或断点样式。
✅ 4. 避免高度塌陷问题
- 传统块级布局中，若子元素浮动或绝对定位，父容器可能高度为 0。
- Flex 容器自动包裹子元素高度，无需
clearfix或overflow: hiddenhack。
✅ 5. 与现代框架（React/Vue）高度契合
- 组件化开发中，
.page常作为根布局容器。 - 结合 CSS-in-JS 或 Tailwind（如
flex flex-col min-h-screen），代码简洁且可维护性强。
🚫 对比传统方案（无 Flex）
| 问题 | 传统布局 | Flex 布局 |
|---|---|---|
| 页脚不贴底 | 需 JS 或复杂 CSS | flex: 1 一行解决 |
| 垂直居中 | position + transform |
justify-content: center |
| 子项等高 | 难以实现 | 默认拉伸（align-items: stretch） |
💡 最佳实践建议
.page {display: flex;flex-direction: column;min-height: 100vh; /* 关键：确保至少占满屏幕 *//* 可选：控制水平对齐 */align-items: stretch; /* 默认，子项宽度 = 容器宽度 */
}
然后给中间内容区域加 flex: 1，即可实现完美弹性布局。
总结：
.page { display: flex; flex-direction: column }是构建现代垂直页面布局的基石，它简洁、健壮、响应式友好，能解决大量传统布局痛点，是当前前端开发的推荐标准做法。