不推荐，但可应急；Flexbox专为一维布局设计，用于整页易导致响应式失控、嵌套计算混乱及兼容性问题，更适合组件级布局，整页推荐Grid+Flex分工协作。
flexbox 适合做整体页面布局吗？答案是：不推荐，但可应急
Flexbox 的设计目标是一维布局（单行或单列），不是为整页结构（header + sidebar + main + footer）而生。用它强行撑起整个页面，容易在响应式、嵌套深度、对齐行为上失控。
为什么 flexbox 做整页布局容易出问题
常见错误现象包括：min-height: 100vh 失效、flex: 1 在嵌套中不按预期拉伸、align-items: stretch 被父级 height 截断、多层 display: flex 导致计算逻辑混乱。
- Flex 容器的主轴方向固定（
flex-direction: row或column），而页面通常需同时控制水平+垂直空间分配 -
flex-wrap: wrap在整页中极少有用，反而可能意外折行 - 当 sidebar 需固定宽度、main 需自适应、footer 需粘底时，flex 需多层嵌套 + 多个
flex-basis/flex-grow组合，可读性骤降 - 旧版 Safari（iOS 11–12）对
flex: 1在嵌套中的解析有偏差，导致高度塌陷
什么场景下可以用 flex 做整页布局
仅限于结构极简、无复杂嵌套、且能接受浏览器兼容性妥协的内部工具页或落地页。
- 只有 header + main + footer 三部分，且不需要 sidebar
- 所有区域高度明确（如
header: 60px,footer: 40px），main 用flex: 1占满剩余空间 - 不依赖
align-content或多行flex-wrap - 已用
@supports (display: flex)做降级处理，或完全不考虑 IE11
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header { height: 60px; }
main { flex: 1; }
footer { height: 40px; }
更合适的选择：grid + flex 分工明确
用 display: grid 控制页面一级结构（定义 header/sidebar/main/footer 区域），再用 display: flex 处理各区域内元素排列（如导航菜单居中、卡片列表对齐）。这才是现代 CSS 布局的真实分工。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-areas直观声明布局意图，比 flex 嵌套更易维护 -
grid-template-rows: auto 1fr auto比flex: 1更可靠地实现“中间填满” - 支持二维响应式重排（
@media中直接改grid-template-areas） - flex 仍保留在组件级——按钮组、表单行、标签云这些才是它的主场
body {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 250px 1fr;
min-height: 100vh;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
实际项目里，看到有人把整页写成五层 display: flex 嵌套，最后靠 !important 强行调高度——那不是 flexbox 的问题，是没分清它该在哪发力。 
