Flex实现双飞翼布局的核心是order控制视觉顺序和flex-grow让中间栏自适应，HTML中必须将.center置于最前以保障SEO与可访问性，左右栏需显式设order值并限宽，.center须配flex-basis:0或min-width:0防溢出。
Flex 实现双飞翼布局不需要负 margin、不需要浮动、也不需要嵌套 wrapper 或额外的 margin-left hack，核心就两点：order 控制视觉顺序，flex-grow 让中间栏自适应撑满 —— 但必须注意 HTML 结构和宽度约束，否则会出错。
HTML 结构必须把中间栏写在最前面
双飞翼强调语义优先：主内容（.center）应位于 DOM 最前，左右栏后置。这是为了 SEO 和可访问性，也是 order 能生效的前提。
错误写法（左右前置）：<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
这样即使设 order，键盘焦点和屏幕阅读器仍按源序读取，违背双飞翼本意。
正确结构示例：
<div class="container"> <div class="center">主内容</div> <div class="left">左栏</div> <div class="right">右栏</div> </div>
-
.center默认order: 0，保持视觉居中需设为order: 2（或更小值，取决于左右设置） -
.left设order: 1，.right设order: 3，才能形成「左-中-右」视觉流 - 所有子项必须是
.container的直接子元素，不能套多层 wrapper
flex-grow: 1 只对 .center 有效，左右栏必须显式限宽
flex-grow: 1 不是万能填充符 —— 它只在剩余空间内生效，而左右栏若没设宽，会随内容撑开，挤占中间空间。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：.center 没撑满、左右栏错位、整个布局换行
正确做法：
-
.center { flex-grow: 1; }—— 必须配合flex-basis: 0或min-width: 0防止内容溢出干扰计算 -
.left { width: 200px; flex-shrink: 0; }或更稳妥地写成flex: 0 0 200px -
.right { width: 220px; flex-shrink: 0; }同理 - 不推荐仅用
width，因为 Flex 下width可能被flex-basis覆盖；flex: 0 0 <value></value>更可靠
order 值冲突时按 HTML 源序 fallback
当多个元素 order 相同（比如都设为 0），浏览器不会报错，但会严格按 HTML 中出现顺序排列 —— 这会导致 .left 和 .right 挤在 .center 左侧，破坏布局。
实操建议：
- 显式声明全部三者的
order，避免依赖默认值 - 推荐组合：
.left { order: 1; }，.center { order: 2; }，.right { order: 3; } - 不要用
order: -1或极大正数（如999），容易在后续维护中引发意外覆盖 - 动画
order会触发 layout，滚动中动态改order可能卡顿，双飞翼布局本身是静态结构，无需动画
兼容性与 fallback 注意点
Flex 布局在 IE10+ 支持良好，但 IE10/11 对 flex-wrap 和某些 order 组合有 bug。若需兼容旧 IE，别用 Flex 方案 —— 双飞翼本质是为解决 IE6/7 浮动缺陷而生，现代项目用 Flex 就该彻底放弃旧兼容。
真正容易被忽略的是：
-
.container必须设display: flex，且不能被min-height或height错误限制导致高度塌陷 - 若中间内容超长，
.center默认不换行，需加overflow-wrap: break-word或word-break: break-word - 响应式场景下，
@media中修改order是安全的，但不要同时改flex-direction和order，容易混乱
