CSS 三栏布局：圣杯 / 双飞翼 / Flex
三栏布局要求：左右两栏定宽、中间栏自适应且“主体内容先渲染”。圣杯布局用 padding 留白 + 相对定位：三栏都浮动，中间栏 DOM 放最前、width: 100%，左右栏用负 margin 移到父级 padding 留出的位置，再用 position: relative 微调。双飞翼布局是圣杯的改良：中间栏内再包一层 div，用子元素 margin 避开左右栏，省掉了相对定位的脆弱性。
现代答案直接 Flex：左右 flex: none 定宽，中间 flex: 1 自适应；DOM 顺序上把中间写最前即可先渲染。三种方案都要会：先给 Flex，再解释圣杯与双飞翼的历史意义。
- Flex：左右 flex:none 定宽 + 中间 flex:1 自适应，DOM 中中间栏放最前
- 圣杯：父级 padding 留白 + 负 margin + 相对定位，中间栏内容最先渲染
- 双飞翼：中间再套一层容器用 margin 避让，比圣杯更稳，流行更广
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> /* 现代方案：Flex 三栏，中间 DOM 最前 */ .layout { display: flex; } .center { flex: 1; order: 2; background: #ffd; padding: 10px; } .left { flex: 0 0 180px; order: 1; background: #efe; padding: 10px; } .right { flex: 0 0 200px; order: 3; background: #eef; padding: 10px; } /* 经典：双飞翼（中间套容器，margin 避让） */ .wing .center { float: left; width: 100%; } .wing .center .inner { margin: 0 200px 0 180px; background: #ffd; padding: 10px; } .wing .left { float: left; width: 180px; margin-left: -100%; background: #efe; padding: 10px; } .wing .right { float: left; width: 200px; margin-left: -200px; background: #eef; padding: 10px; } .wing::after { content: ''; display: block; clear: both; } </style> </head> <body> <div class="layout"> <div class="center">中间（先渲染）</div> <div class="left">左 180</div> <div class="right">右 200</div> </div> <hr> <div class="wing"> <div class="center"><div class="inner">双飞翼中间</div></div> <div class="left">左 180</div> <div class="right">右 200</div> </div> </body> </html>
本节要点三栏布局：Flex 一行解（左定中间 flex:1）；圣杯与双飞翼是浮动时代的遗产，理解“主体先渲染 + 负 margin 避让”即可。
