不能用css flex实现真正的双飞翼布局，因其特指2006年为ie6–ie7设计的float+负边距+padding预留+bfc hack方案；flex无“行”概念，margin-left:-100%无效，应使用order和flex属性实现语义与视觉分离的三栏布局。
不能用 CSS Flex 实现真正的“双飞翼布局”——这个词特指 2006 年为兼容 IE6–IE7 设计的、基于 float + margin-left: -100% + padding 预留空间 + overflow: hidden 触发 BFC 的一套 hack 方案。Flex 机制与之完全无关，强行套用只会出错。
为什么 flex 容器里写 margin-left: -100% 没用
在 display: flex 容器中，子项的 margin 百分比值按容器宽度计算，但负 margin 不会“拉回上一行”，因为 flex 没有“行”的概念；它只按主轴顺序排列，靠 order 和 flex 属性控制位置与尺寸。margin-left: -100% 在这里既不改变视觉顺序，也不触发任何布局重排，纯属无效代码。
- 常见错误现象：左侧栏消失、错位，或整个布局塌陷
- 真正起作用的是
order：它只改渲染顺序，不改 DOM 顺序 -
flex: 1或flex: 0 0 200px才决定尺寸，不是 padding 或 margin
现代项目该用什么替代双飞翼
你实际要的是“三栏等高 + 中间内容 HTML 在前 + 视觉居中”，这用 flex 三行就能干净解决：
- 父容器设
display: flex -
.main设order: 2+flex: 1 -
.left设order: 1+flex: 0 0 200px -
.right设order: 3+flex: 0 0 200px
HTML 保持语义顺序：<main></main> 写最前，<aside class="left"></aside> 和 <aside class="right"></aside> 紧随其后——搜索引擎和屏幕阅读器照这个读，视觉上却是左-主-右。
容易被忽略的关键点
order 只影响视觉顺序，不影响 Tab 键焦点流或可访问性顺序。键盘用户仍按 HTML 顺序 tab：先 .main，再 .left，最后 .right。如果你需要焦点也匹配视觉顺序，必须手动加 tabindex 或用 ARIA 属性干预。
另外，position: absolute 元素完全脱离 flex 流，order 对它无效；IE10 虽支持 -ms-order，但不支持 flex: 1，所以别试图兼容老浏览器——2026 年主流浏览器已全量支持现代 flex，真要支持 IE 就得换方案，而不是硬套 flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
