现代项目应直接用 display: flex + order 实现圣杯布局，无需浮动或绝对定位；核心是父容器设 flex，main 设 order:2 且 flex:1，左右栏设 order:1/3 且固定宽，html 保持语义顺序。
直接用 display: flex + order 就能干净实现，不需要嵌套、负边距或 relative 定位——现代项目里，这是唯一值得写的方案。
为什么不用浮动或绝对定位写圣杯/双飞翼
浮动方案依赖 margin-left: -100% 和 overflow: hidden 触发 BFC，但：
• overflow: hidden 会意外裁剪 box-shadow 或 transform 溢出部分
• 侧栏高度略高时，容器不会自动等高，得靠 JS 或 min-height 补
• DOM 顺序必须妥协（比如把 main 放最后），破坏可访问性和 SEO
• IE11 已停更，连微软都不再支持，没必要为兼容性牺牲可维护性
Flex 实现的核心三步
所有关键逻辑集中在父容器和三个子元素的声明上：
- 父容器必须设
display: flex，否则order不生效 -
.main设order: 2+flex: 1：保证它视觉居中且撑满剩余空间 -
.left设order: 1+flex: 0 0 200px：固定宽、不缩放、不拉伸 -
.right设order: 3+flex: 0 0 200px：同上，数值比main大就排在后面
HTML 结构保持语义优先：<main></main> 写在最前，<aside class="left"></aside> 和 <aside class="right"></aside> 紧随其后——屏幕阅读器和搜索引擎按这个顺序读，视觉上却呈现「左-主-右」。
容易被忽略的坑：order 只改视觉，不改流
order 是纯视觉重排，不是 DOM 重排：
- Tab 键焦点仍按 HTML 顺序走：先
main，再left，最后right—— 如果你希望键盘用户也按视觉顺序操作，得额外加tabindex或用 ARIA 控制 -
position: absolute元素完全不响应order，因为它已脱离 flex 流 - 动画
order值会触发 layout，滚动中频繁变更可能卡顿，别用它做动态栏目切换 - IE10 需要
-ms-order前缀，但 IE10 不支持flex: 1，所以实际兼容写法极其受限，不建议投入精力
真正需要纠结的从来不是怎么写，而是要不要写——如果项目目标浏览器是 Chrome/Firefox/Safari/Edge（2026 年已全量支持 Flex），那就直接删掉所有浮动代码，三行 CSS 足够。剩下要操心的，其实是语义结构是否真符合内容优先，而不是视觉是否“看起来对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
