Flex圣杯布局是用Flexbox实现的经典三栏布局，核心为左/右栏固定宽、中间栏自适应，且HTML中main必须前置以保障语义与SEO，通过order控制视觉顺序、flex:1 0 0实现等高自适应，无需浮动、负边距或绝对定位。
什么是 Flex 圣杯布局？别被名字吓住
“圣杯布局”本质就是三栏：固定宽度的左栏、右栏，中间自适应；且 HTML 结构要求 main 写在最前面（利于 SEO 和可访问性），但视觉上要居中。用 Flex 实现它，**不需要浮动、不需要负 margin、不依赖 position 脱离文档流**——只要理解 order 和 flex-grow 的配合就行。
HTML 结构必须按语义顺序写，不能为了布局调换 DOM
这是圣杯的核心约束。正确的结构是：main 在前，header、aside.left、aside.right 按逻辑顺序排列（比如 header 在最顶，但也可以放后面）。Flex 会靠 order 控制视觉顺序，而不是靠 DOM 位置。
常见错误：把 aside.left 写在 main 前面，以为“这样才好布局”。结果语义混乱，屏幕阅读器读错，打印样式也错。
推荐结构示例：
立即学习“前端免费学习笔记（深入）”；
<body class="container"> <header>Header</header> <main>Main content</main> <aside class="left">Left sidebar</aside> <aside class="right">Right sidebar</aside> <footer>Footer</footer> </body>
Flex 容器关键设置：display: flex + flex-direction: column
整页用 column 方向更可控，避免行内换行带来的高度塌陷问题。每块区域再各自设为 display: flex（比如 main 内部需要横向排子元素时）。
关键 CSS 规则：
.container { display: flex; flex-direction: column; min-height: 100vh; }-
header, footer { flex: 0 0 auto; }—— 不伸缩、不压缩，高度由内容决定 -
main { flex: 1 0 0; order: 2; }—— 占满剩余空间，视觉上放中间 -
.left { flex: 0 0 200px; order: 1; }—— 固定宽，视觉上放最左 -
.right { flex: 0 0 200px; order: 3; }—— 固定宽，视觉上放最右
注意：flex: 1 0 0 中的 0 是 flex-basis，设为 0 才能真正均分剩余空间；设成 auto 或具体值（如 500px）会导致中间栏宽度受限或撑开容器。
三栏横向对齐时，main 必须设 display: flex 并用 margin 或 flex 推开两侧
如果 header/footer 是通栏，而 left/main/right 需在同一行显示（经典圣杯），那它们三个得包在一个 .content 容器里，并设为 display: flex。
这时不能靠 order 拉整行顺序（因为它们同级），而是：
.content { display: flex; }-
.left { width: 200px; margin-left: -100%; }—— 向左拉出，覆盖 main 左侧 -
main { flex: 1; }—— 自适应宽度 -
.right { width: 200px; margin-left: -200px; }—— 向左拉出，紧贴 main 右侧
这个方案兼容性更好（IE10+），但比纯 column 方案多一层嵌套。真正容易踩的坑是：忘记给 .content 设 overflow: hidden，导致左右栏溢出后被截断看不见；或者没设 box-sizing: border-box，边框/内边距让宽度超限。
复杂点在于：响应式断点一加，order 和 margin 两套逻辑得同时维护。移动端建议直接切回 column，用 order 控制阅读顺序，别硬撑三栏。
