Grid负责页面整体骨架布局，flexbox处理区域内部对齐；1. 用Grid定义宏观结构如头部、侧边栏、主内容区和页脚的二维排列；2. 在Grid区域内使用Flexbox实现导航项均匀分布或内容垂直居中等一维弹性布局；3. 响应式设计中大屏用Grid多列、小屏用Flexbox堆叠，或在Grid不变下通过Flexbox调整子元素；4. 避免过度嵌套，按需分工：二维布局选Grid，一维对齐选Flexbox，容器内自动填充用Flexbox更佳。二者协同提升布局效率与可维护性。

Flexbox 和 Grid 是 css 中最强大的两种布局工具，它们各有优势。合理结合使用，能更高效地构建复杂且响应式的页面结构。

1. 用 Grid 做整体页面布局

Grid 非常适合划分整个页面的宏观结构，比如头部、侧边栏、主内容区和页脚的排列。

通过 grid-template-areas 可以直观定义区域分布，清晰易维护。

示例：

 .container {   display: grid;   grid-template-areas:     "header header"     "sidebar main"     "footer footer";   grid-template-rows: 60px 1fr 40px;   grid-template-columns: 200px 1fr;   height: 100vh; } header { grid-area: header; } aside { grid-area: sidebar; } main { grid-area: main; } footer { grid-area: footer; } 

2. 在 Grid 区域内使用 Flexbox 处理内部对齐

虽然 Grid 擅长二维布局，但在某个区域内实现水平或垂直居中、等分布局时，Flexbox 更简洁直观。

立即学习“前端免费学习笔记（深入）”；

比如在 header 或 footer 中让导航项均匀分布，或让内容在单元格内居中。

BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

28

查看详情

示例：

• header 内部导航项等宽分布：

 header {   display: flex;   justify-content: space-between;   align-items: center; }   
• 在 Grid 单元格中垂直居中内容：

 main {   display: flex;   flex-direction: column;   justify-content: center; }   

3. 响应式设计中的协同使用

在不同屏幕尺寸下，可灵活切换策略：大屏用 Grid 划分多列，小屏用 Flexbox 堆叠内容。

也可以保持 Grid 主结构不变，在子容器中用 Flexbox 自适应内部元素排列。

技巧：

• 在移动视图中，将 Grid 的某一块（如 sidebar）设为隐藏，main 区域占满宽度。
• Grid 容器内的子项使用 display: flex 实现内部弹性布局，不受 Grid 列宽限制。

4. 避免过度嵌套，按需选择

不是所有地方都需要同时使用两者。明确分工能提升代码可读性。

基本原则：

• 二维布局（行列都控制）→ 使用 Grid
• 一维布局（只关心行或列）→ 使用 Flexbox
• 容器需要自动填充或对齐内部元素 → Flexbox 更合适

基本上就这些。Grid 负责“骨架”，Flexbox 负责“肌肉”，配合得当，布局更轻松。不复杂但容易忽略的是：别强行套用，按实际结构选工具才是关键。

以上就是