现代H5项目应优先使用Flexbox实现三栏布局：父容器设display: flex，主内容区order: 2+flex: 1，左右栏分别order: 1/3+flex: 0 0 200px，HTML保持<main>前置语义顺序，兼顾SEO、可访问性与视觉效果。
现代 H5 项目中，圣杯布局和双飞翼布局已不再需要浮动、负边距或嵌套 wrapper——直接用 Flexbox 就能干净、语义化地实现。核心不是“怎么模拟旧方案”，而是用 display: flex + order + flex 缩放逻辑，还原「主内容优先书写、视觉左-中-右排列」的本质需求。
Flex 实现圣杯布局（推荐主流写法）
关键在父容器设 display: flex，三栏按语义顺序写（<main> 在前），再用 order 调整视觉流：
-
父容器：加
display: flex，不设flex-direction（默认 row） -
主内容区（如 <main>）：设
order: 2+flex: 1（占满剩余空间） -
左侧栏：设
order: 1+flex: 0 0 200px（固定宽、不缩放） -
右侧栏：设
order: 3+flex: 0 0 200px
HTML 保持自然顺序：<main> → <aside class="left"> → <aside class="right">。屏幕阅读器和搜索引擎按此读取，视觉上却呈现标准三栏。
Flex 实现双飞翼布局（语义等价，无需额外 DOM）
双飞翼本质是为解决圣杯中「主内容内边距难控制」的问题而引入额外 wrapper（如 <div class="inner">）。但在 Flex 下，这个 wrapper 已无必要：
- 主内容区本身可直接设
padding-left: 200px和padding-right: 200px，留出侧栏空间 - 左右栏仍用
order定位，宽度固定，不侵入主内容区域 - 无需像传统双飞翼那样给
.inner加margin，也避免了多一层 DOM 和样式耦合
换句话说，Flex 版本的「双飞翼」就是圣杯布局加一行 padding —— 逻辑更直白，维护成本更低。
必须注意的兼容与行为细节
order 只影响视觉顺序，不影响文档流和键盘导航顺序：
- Tab 键仍按 HTML 顺序聚焦：先
<main>，再左栏，最后右栏。如需匹配视觉顺序，需手动加tabindex或用 ARIA 属性 -
position: absolute元素完全脱离 flex 流，order对其无效 - 动画
order值会触发重排（reflow），慎用于高频交互场景（如滑动切换栏目） - IE10/11 不建议投入适配：IE10 需
-ms-order但不支持flex: 1，实际无法可靠运行；当前 H5 主流环境（Chrome、Safari、Firefox、Edge）均已原生支持完整 Flex 特性
为什么不用浮动或 Grid 替代？
浮动方案存在硬伤：依赖 overflow: hidden 触发 BFC，会意外裁剪 box-shadow 或 transform 溢出内容；侧栏略高时容器不自动等高；DOM 必须妥协（把 main 放最后），损害可访问性。
Grid 当然也能做（grid-template-columns: 200px 1fr 200px + grid-column 重排），但对简单三栏而言，Flex 更轻量、更易理解、兼容性更稳（Grid 的 IE 支持更差）。真正要纠结的，从来不是技术选型，而是：主内容是否真在 HTML 中最前？结构是否符合语义优先？
