使用 Flex 与 Grid 协同实现响应式三栏布局：1. Flex 控制整体结构，左侧栏与主内容区横向排列；2. Grid 在主内容区内划分中间与右侧两栏，比例为 2:1；3. 屏幕小于 768px 时，通过媒体查询切换为纵向堆叠，三栏垂直排列；4. HTML 结构清晰分离语义区域，便于维护。Flex 适合一维流式布局，Grid 擅长二维网格规划，二者结合可高效构建自适应界面。
响应式三栏布局在现代网页设计中非常常见，尤其是在仪表盘、内容管理系统和新闻网站中。通过结合 Flexbox 和 CSS Grid，可以实现既灵活又强大的布局结构。下面介绍如何使用 Flex 与 Grid 协同工作，构建一个自适应屏幕尺寸的三栏布局。
1. 使用 Flex 实现整体容器的响应式结构
Flexbox 非常适合处理一维布局（行或列），我们可以用它来定义页面的整体结构，比如侧边栏+主内容区的组合，并在不同屏幕尺寸下调整显示方式。
例如，将左侧两栏合并为一个区域，右侧为另一栏，在大屏幕上三栏并排，在小屏幕上堆叠排列：
.container {
display: flex;
height: 100vh;
flex-direction: row;
}
<p>.sidebar-left {
flex: 1;
background-color: #f0f0f0;
}</p><p>.main-content {
flex: 3;
display: flex;
flex-direction: row; /<em> 在主内容区内部再使用flex </em>/
}</p>这样左侧栏占较小宽度，右侧主区域再分为两个子栏，形成三栏结构的基础。
立即学习“前端免费学习笔记（深入）”；
2. 在主内容区使用 Grid 实现精细的两栏布局
CSS Grid 擅长二维布局，适合在 .main-content 区域内划分中间栏和右侧栏，实现更复杂的对齐和间距控制。
.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
padding: 10px;
}
这里将主内容区划分为两列：中间栏占2份，右侧栏占1份，间隙为16px。Grid 的优势在于可以轻松定义行列、区域和对齐方式。
3. 响应式断点：屏幕变小时切换为垂直堆叠
为了实现真正的响应式，我们需要在小屏幕上调整布局结构。结合媒体查询，让三栏在移动端垂直排列。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
<p>.sidebar-left,
.main-content {
width: 100%;
}</p><p>.main-content {
grid-template-columns: 1fr;
}
}</p>当屏幕宽度小于768px时，整个布局变为纵向堆叠。左侧栏在上，主内容区在下，而主内容区内的两栏也变为单列显示。
4. 实际结构示例（HTML）
<div class="container">
<aside class="sidebar-left">左侧导航栏</aside>
<main class="main-content">
<section class="center-pane">中间内容区</section>
<section class="right-pane">右侧边栏</section>
</main>
</div>
这种结构清晰分离了语义区域，便于维护和样式控制。
基本上就这些。通过 Flex 控制整体流动方向和响应行为，用 Grid 精确管理局部复杂布局，两者互补，能高效实现响应式三栏设计。关键是理解各自优势：Flex 处理“容器级”流式排列，Grid 负责“区域级”网格规划。不复杂但容易忽略细节适配。
