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>/
}</p>这样即使 HTML 中 main 在前，页面仍按「左-中-右」显示，且中间区域随窗口缩放实时自适应。
响应式与边界处理
实际项目中注意几个细节：
- 给容器加
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 解析略有差异，建议单独测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
