Flex实现双飞翼布局无需margin，核心是order控制视觉顺序、flex-grow实现中间栏自适应，且HTML中.center必须置于最前以保障SEO与可访问性，左右栏需显式设order并限宽，.center须配flex-basis:0防溢出。
Flex 实现双飞翼布局根本不需要 margin 配合 —— 用 margin 反而会破坏布局稳定性，是典型的历史惯性错误。
为什么不能用 margin 实现 Flex 版双飞翼
双飞翼在浮动时代依赖 margin-left: -100% 和 position: relative 是因为浮动脱离文档流、无法自动分配剩余空间；而 Flex 的 flex-grow 天然解决自适应，order 天然控制视觉顺序。一旦混入 margin：
-
margin会干扰 Flex 的空间计算，尤其在容器有 padding 或 border 时，flex-grow行为变得不可预测 - 左右栏若用
margin-left/right拉位，order就失去意义 —— 视觉顺序由 margin 决定，DOM 顺序和可访问性保障失效 - 响应式断点下，
margin值难适配，而flex属性天然支持媒体查询覆盖
正确的 order + flex-grow 组合写法
核心就三行 CSS，但每行都有明确约束条件：
-
.center { order: 2; flex-grow: 1; flex-basis: 0; }——flex-basis: 0必须显式写，否则内容宽度过大会撑开自身，挤占左右栏空间 -
.left { order: 1; flex: 0 0 200px; }—— 用flex: 0 0 <width>而非仅width，避免被flex-basis覆盖；flex-shrink: 0防止压缩 -
.right { order: 3; flex: 0 0 220px; }—— 同理，order: 3确保它排在最右，不与.left同序导致 fallback 到 DOM 顺序
HTML 结构错位会导致整个布局“失语”
哪怕 CSS 全对，只要 HTML 顺序错了，屏幕阅读器、SEO、键盘 Tab 流都会按源码读取 —— 这就不是“双飞翼”，只是视觉上像而已：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误结构：
<div class="left"></div><div class="right"></div><div class="center"></div> - ✅ 正确结构：
<div class="center"></div><div class="left"></div><div class="right"></div>（.center必须是容器第一个子元素） - 所有三栏必须是同一父容器的直接子元素，不能套
<div class="inner">—— 多一层 wrapper 就多一层 flex 上下文，order失效
IE10 兼容需要手动补全前缀
如果真要支持 IE10（已极少见），order 和 flex 都得加前缀，且不能缩写：
-
.center { -ms-order: 2; flex: 1 1 0; }—— IE10 不支持flex-grow: 1单独写，必须用完整flex声明 -
.left { -ms-order: 1; flex: 0 0 200px; }——-ms-flex语法虽存在，但实测flex: 0 0 200px在 IE10 下兼容性更好 - 现代项目基本可忽略此条，但若遇到遗留系统报错
Invalid property name，大概率是漏了-ms-前缀
最容易被忽略的是 flex-basis: 0 和 HTML 顺序 —— 它们不报错，但会让 flex-grow 表现异常：中间栏窄、换行、或左右栏被内容撑开。这两个点没调对，其他都白搭。
