Flex实现圣杯/双飞翼布局更简单：用order控制视觉顺序（#left{order:-1}）、flex-grow:1让主内容自适应，无需负边距、嵌套或padding预留；注意避免width冲突、确保高度继承，并在IE10–11中加-ms-前缀。
直接用 display: flex 实现圣杯/双飞翼布局，比浮动方案简单得多，且天然支持等高、语义清晰、响应式友好。不需要负边距、相对定位或容器 padding 预留空间，主内容区 DOM 顺序也完全自由。
flex 实现圣杯布局的关键：order + flex-grow
圣杯布局要求左侧栏视觉上在最左、主内容居中自适应、右侧栏最右，但 HTML 中主内容需前置（利于 SEO）。Flex 的 order 属性正好解决视觉顺序与 DOM 顺序分离的问题。
-
order控制子项在 flex 容器中的排列次序：默认为 0，数值越小越靠前；设#left { order: -1 }就能把它“提”到最左边 -
#center不设order（保持 0），再用flex-grow: 1占满剩余空间 -
#right保持默认order: 0，但因#left提前了，它自然落到最右 - 注意：所有栏必须设
height或继承高度，否则 flex 容器可能塌缩（尤其在无内容时）
flex 实现双飞翼布局：本质和圣杯一致，无需额外嵌套
双飞翼布局常被误认为需要 .center > .inner 这种嵌套结构，但在 Flex 下这纯属冗余。它的原始动机（避免 padding 挤压内容）在 flex 布局中根本不存在——flex-grow 是按可用空间动态分配的，不依赖父容器 padding。
- 只要三栏同级、都设
float: left的历史包袱没了，.inner包裹层就失去了存在意义 - 若你仍想保留该结构（例如为了 margin 隔离或样式作用域），只需确保
.inner不破坏 flex 流：设width: 100%或flex: 1即可，无需 calc 或负 margin - 真正要注意的是：不要对
.center设固定width，否则flex-grow失效
常见错误：flex-direction 和 width 冲突
当发现三栏堆成一列或宽度异常，大概率是以下两个低级但高频的坑：
立即学习“前端免费学习笔记（深入）”；
- 忘记给 flex 容器设
flex-direction: row（虽然默认就是 row，但若全局重置过flex-direction: column就会出问题） - 给
#center错误地加了width: 100%—— 这会压制flex-grow，导致它强行占满整行，把左右栏挤到下一行 - 给
#left或#right设了flex: 1而非固定width，结果它们和中间栏抢空间 - 容器没设
min-width，窄屏下左右栏文字换行撑高，而#center因内容少显得矮——这不是 bug，是 flex 等高机制生效了；如需强制统一最小高度，加min-height到各栏
真正容易被忽略的点是：flex 圣杯布局在 IE10–IE11 中需加 -ms- 前缀（如 display: -ms-flexbox），且 order 在旧版 IE 中行为不稳定；如果项目还需兼容这些浏览器，别硬扛，退回双飞翼的 calc 方案更稳妥。
