.page{display: flex; flex-direction: column; min-height: 100vh;}能解决大量传统布局痛点，是前端开发的推荐标准做法

在 .page 容器上添加以下 CSS 样式：

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;  // 新单位
}

具有以下几个显著优点，尤其适用于现代 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: hidden hack。

---

✅ 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 } 是构建现代垂直页面布局的基石，它简洁、健壮、响应式友好，能解决大量传统布局痛点，是当前前端开发的推荐标准做法。