双飞翼布局是2006年为兼容ie6–ie7设计的基于float、负margin和padding的css hack方案，flex因其不依赖浮动、负边距及bfc清除机制，本质无法实现真正双飞翼。
flex 本身不支持“双飞翼布局”——这个词是特指 **2006 年前后为兼容 IE6–IE7 设计的、基于负 margin + float + padding 的 CSS hack 布局方案**。用 flex 实现所谓“双飞翼”，本质是自相矛盾的：双飞翼存在的前提，就是不能用 flex。
如果你真在写现代项目（Chrome/Firefox/Safari/Edge ≥ 2018，或需要兼容 IE11+），直接用 display: flex 或 display: grid 即可，无需套用双飞翼那套逻辑。
为什么不能用 flex 实现“双飞翼布局”
双飞翼的核心约束有三个，而 flex 全部绕开了它们：
- HTML 结构必须是
main → left → right（语义优先，但 DOM 顺序 ≠ 渲染顺序） - 依赖
float+margin-left: -100%+padding预留空间来“欺骗”渲染流 - 必须触发 BFC（如
overflow: hidden）来清浮动，否则塌陷
flex 完全不走浮动流，也不依赖负 margin 拉位置；它靠 order 控制视觉顺序，靠 flex-grow / flex-basis 控制尺寸，和双飞翼的底层机制毫无交集。
你真正想实现的，其实是“三栏等高 + 中间内容优先”的效果
这个需求在现代 CSS 里有更干净、更可控的解法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
display: flex：父容器设display: flex，中间项设flex: 1，左右固定宽；order属性可让中间项 HTML 在前、视觉在中 - 用
display: grid：定义三列grid-template-columns: 200px 1fr 200px，再用grid-template-areas或order调整源顺序 - 若需保留 HTML 中间优先（如 SEO/可访问性），
flex下可直接写：<main></main><aside class="left"></aside><aside class="right"></aside>，然后用.left { order: -1; }和.right { order: 1; }
强行套双飞翼逻辑到 flex 上的典型错误
有人试图在 flex 容器里加 margin-left: -100% 或 padding 预留空间，结果：
-
margin-left: -100%在 flex 容器中无效（flex item 的 margin 百分比按容器 width 计算，但负值不会“拉回上一行”，因为根本没行概念） - 给中间项加
padding-left再让左右项用margin-left覆盖——这会破坏 flex 的自动对齐，且无法保证等高（flex 等高靠的是容器align-items: stretch，不是靠 padding 撑） - 加
overflow: hidden想“清浮动”——flex 里根本没浮动，加了反而可能裁剪溢出内容
最后提醒一个容易被忽略的点
如果你的项目真要同时满足「IE6 兼容」和「用 flex」，那是不可能的：flex 在 IE10+ 才有部分支持，IE6–IE9 完全不识别。所谓“flex 双飞翼”，要么是术语误用，要么是混淆了目标（你要的不是双飞翼，而是三栏自适应布局）。别为了一个过时的名词，把现代工具往老路硬套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
