Flex实现圣杯布局的核心是容器设display: flex，主区域用flex: 1自适应，侧栏设固定宽并用order控制视觉顺序；HTML可按SEO优先将main前置，CSS通过order调整为左-中-右显示。

用 Flex 实现圣杯布局（即两栏或三栏，中间内容自适应、侧栏固定宽度）非常简洁，不需要浮动或负 margin，核心在于 flex 容器 + 主区域 flex: 1。

结构准备：语义化 HTML

圣杯布局通常指「左栏（固定宽）+ 中栏（自适应）+ 右栏（固定宽）」。HTML 顺序建议按视觉逻辑写（中栏在前更利于 SEO 和可访问性），但 Flex 可通过 order 控制渲染顺序：

<div class="container">
  <main class="main">主内容</main>
  <aside class="sidebar-left">左侧栏</aside>
  <aside class="sidebar-right">右侧栏</aside>
</div>

Flex 布局核心 CSS

给容器设为 flex，并让主区域自动撑满剩余空间：

.container {
  display: flex;
}
<p>.sidebar-left {
width: 200px; /<em> 固定宽度 </em>/
order: 1;      /<em> 视觉上放最左 </em>/
}</p><p>.main {
flex: 1;       /<em> 关键：自动占据剩余空间 </em>/
order: 2;      /<em> 放中间 </em>/
}</p><p>.sidebar-right {
width: 240px;  /<em> 固定宽度 </em>/
order: 3;      /<em> 视觉上放最右 </em>/
}

这样即使 HTML 中 main 在前，页面仍按「左-中-右」显示，且中间区域随窗口缩放实时自适应。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

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

响应式与边界处理

实际项目中注意几个细节：

• 给容器加 min-width 防止小屏下侧栏被过度挤压（如 min-width: 768px）
• 小屏时可用 @media 把 layout 改为垂直堆叠：flex-direction: column，并重置 order 和 width
• 避免给 .main 设固定宽或 max-width，否则会破坏 flex:1 的伸缩性
• 若需侧栏有背景/边框，直接加在对应元素上，无需额外 wrapper

兼容性说明

Flex 布局在现代浏览器（Chrome 29+、Firefox 28+、Safari 9+、Edge 12+）中完全支持。如需兼容 IE10/11，需加 -ms- 前缀（如 display: -ms-flexbox），但 IE 对 flex: 1 解析略有差异，建议单独测试。