Grid负责页面整体区域划分，Flex处理组件内部对齐；例如仪表盘中Grid定义 header、sidebar、content 布局，Flex实现卡片内容居中与导航滚动，响应式下二者协同优化显示。
在现代网页布局中，Flexbox 和 Grid 是最常用的两种 CSS 布局方式。它们各有优势：Flexbox 擅长一维布局（行或列），适合内容对齐和动态伸缩；Grid 则擅长二维布局（行和列同时控制），适合复杂网格结构。将两者结合使用，可以发挥各自优势，实现更灵活、响应式更强的页面布局。
何时使用 Flex 与 Grid 的混合布局
虽然 Grid 能处理大多数布局需求，但在某些场景下，结合 Flexbox 更加高效：
- 容器用 Grid 分割整体区域，比如页头、侧边栏、主内容区、页脚等大块划分。
- 局部区域用 Flex 排列子元素，例如导航菜单、按钮组、卡片内部结构等需要动态对齐的内容。
- 响应式设计中互补使用：Grid 控制断点级别的结构变化，Flex 处理组件内部自适应排列。
实战案例：仪表盘布局（Dashboard）
我们构建一个典型的管理后台仪表盘界面，包含顶部导航、侧边栏、主内容区中的多个统计卡片。
示例结构：
导航栏
CSS 使用 Grid 划分整体结构
.dashboard {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
grid-template-rows: 60px 1fr;
grid-template-columns: 200px 1fr;
height: 100vh;
}
.header { grid-area: header; background: #333; color: white; padding: 0 20px; }
.sidebar { grid-area: sidebar; background: #f4f4f4; }
.content {
grid-area: content;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
background: #eaeaea;
}
卡片内部使用 Flex 布局对齐内容
.card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.card h3 {
margin: 0 0 10px;
}
.card p {
margin: 0;
color: #666;
}
这里，Grid 完成了整个页面的宏观布局，而每个 .card 内部通过 Flex 实现了文字垂直居中、图标与文本整齐排列的效果，简洁且自适应。
响应式优化：断点中切换策略
在小屏幕上，我们可以调整 Grid 结构，并利用 Flex 让某些区域横向滚动或堆叠排列。
@media (max-width: 768px) {
.dashboard {
grid-template-areas:
"header"
"sidebar"
"content";
grid-template-rows: 60px auto 1fr;
grid-template-columns: 1fr;
}
.content {
grid-template-columns: 1fr; / 卡片变为单列 /
}
/ 导航项横向滚动 /
.header {
display: flex;
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
}
}
此时，顶部导航变成水平滚动的 Flex 容器，避免文字换行或挤压，提升移动端体验。
总结：合理分工，各司其职
Flexbox 与 Grid 并非互斥，而是互补。实践中建议：
- 用 Grid 做页面级布局骨架，定义区域位置和尺寸关系。
- 用 Flexbox 处理组件内部排列，尤其是需要对齐、居中、等分布局的地方。
- 在响应式设计中，根据屏幕尺寸灵活调整两者的应用层级。
基本上就这些，掌握这种“Grid 主结构 + Flex 微调”的模式，能让你的布局更清晰、维护更方便。
