使用 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 负责“区域级”网格规划。不复杂但容易忽略细节适配。