Grid 适合页面级二维布局，Flex 擅长组件内一维排列，两者结合可高效构建响应式界面。1. Grid 用于划分整体结构，如头部、侧边栏、主内容区；2. Flex 用于内部元素对齐与弹性分布，如导航菜单或卡片内容；3. 通过媒体查询在不同屏幕下协同调整布局，实现无缝响应式设计。
在现代网页开发中，复杂页面布局常需结合多种技术。Flexbox 和 Grid 是 CSS 中最强大的两种布局工具，各自擅长不同场景。通过将它们组合使用，可以高效构建灵活且响应式的复杂界面。
1. 理解 Flex 与 Grid 的适用场景
Grid 更适合整体页面结构的二维布局（行和列），比如将页面划分为头部、侧边栏、主内容区和页脚。它能精准控制网格间的对齐与间距。
Flex 则适用于一维布局，适合处理容器内部元素的动态排列，如导航菜单、卡片内部结构或按钮组。它的优势在于弹性伸缩和自动填充空间。
混合使用时，通常用 Grid 做页面级布局，用 Flex 处理组件内部结构。
立即学习“前端免费学习笔记（深入）”；
2. 页面结构使用 Grid 布局
定义一个整体容器，使用 display: grid 来划分区域：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
gap: 10px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
这样就构建了一个带侧边栏的经典布局，主内容区可随窗口变化自适应。
3. 组件内部使用 Flex 布局
在 Grid 定义的区域中，进一步使用 Flex 增强内部排布。例如，在 header 中实现水平居中、左右对齐的导航：
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.nav-links {
display: flex;
gap: 20px;
}
或者在一个卡片组件中，让图标和文字垂直居中：
.card {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
}
4. 响应式设计中的协同工作
利用媒体查询动态切换布局策略。例如在小屏幕上，将 Grid 改为单列，同时 Flex 容器调整方向：
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
header {
flex-direction: column;
text-align: center;
}
.nav-links {
flex-direction: column;
}
}
这种方式确保内容顺序合理，视觉层次清晰，无需重写 HTML 结构。
基本上就这些。Grid 控制大局，Flex 精雕细琢，两者互补，能应对大多数复杂布局需求。关键是根据内容结构选择合适的工具，不追求单一方案解决所有问题。
