order只改变视觉顺序，不改变DOM结构、语义顺序及屏幕阅读器读取顺序；默认值为0，数值越小越靠前，负数合法，相同值按HTML源序排列。
Flex布局中order属性怎么改元素显示顺序
直接说结论：order只改变视觉顺序，不改变DOM结构和语义顺序，也不影响键盘焦点、屏幕阅读器读取顺序（除非同时用tabindex或ARIA干预）。它本质是CSS层的“重排”，不是重排文档流。
实操时注意：所有flex子项默认order: 0；数值越小越靠前，负数合法（比如-1比0更优先）；相同order值的元素按HTML源码顺序排列。
- 别依赖
order修复可访问性问题——屏幕阅读器仍按HTML顺序读，视觉错位可能造成认知混乱 -
order对position: absolute子项无效（绝对定位元素已脱离flex流） - 动画
order值会触发重排，频繁变更可能卡顿，慎用于滚动中动态调整
用order模拟圣杯布局的关键约束
传统圣杯布局要求：中间栏优先渲染（SEO/可访问性），左右侧栏宽度固定、中间自适应，且三栏在HTML中必须是「中-左-右」顺序（否则无法满足语义优先）。Flex能用order把左栏“拽”到中间前面，右栏“拽”到后面。
典型HTML结构必须长这样：
立即学习“前端免费学习笔记（深入）”；
<main class="container"> <section class="main">主内容</section> <aside class="left">左侧</aside> <aside class="right">右侧</aside> </main>
对应CSS核心片段：
.container {
display: flex;
}
.main { order: 2; flex: 1; }
.left { order: 1; width: 200px; }
.right { order: 3; width: 200px; }
- 必须设
display: flex在父容器，子项才响应order -
flex: 1让中间栏撑满剩余空间，不能只靠width: auto - 左右栏需显式设宽（或
flex: 0 0 200px），否则order生效但宽度失控
双飞翼布局和圣杯布局用order的区别在哪
双飞翼本质是圣杯的变体，区别只在HTML结构：双飞翼把中间栏再包一层，用内边距留出左右栏位置，避免浮动时代父容器塌陷问题。但Flex下这个包裹层已无必要——order直接作用于子项，无需靠嵌套规避塌陷。
所以实际开发中，用Flex实现二者代码几乎一样，差异只在是否多一层<div class="inner">。如果你看到双飞翼Flex写法还保留内层包裹，大概率是照搬旧模板，没理解Flex已解决原始痛点。
- 双飞翼的“内层margin”在Flex里完全多余，删掉更干净
- 若必须兼容IE10（仅支持
-ms-flexbox），需加-ms-order前缀，且IE10不支持flex: 1缩写，得写全flex: 1 1 auto - 移动端Safari 9.1以下对
order有渲染bug：当父容器min-height不足时，高序号元素可能被截断
为什么不用order而选Grid更稳妥
现在主流项目里，order做三栏布局越来越少见，因为CSS Grid的grid-template-areas或grid-column更直观、更可控，且不干扰语义流。
比如同样需求，Grid写法：
.container {
display: grid;
grid-template-areas: "left main right";
grid-template-columns: 200px 1fr 200px;
}
.left { grid-area: left; }
.main { grid-area: main; }
.right { grid-area: right; }
- Grid的区域定义和HTML顺序彻底解耦，语义、视觉、维护性都更清晰
- Grid支持隐式网格线，跨列/跨行比
order移来移去更符合直觉 - 如果布局含响应式断点（比如小屏变单列），Grid用
@media切grid-template-areas比反复调order值更可靠
真正需要order的场景，其实是微调同级元素的视觉权重，比如表单里把「提交按钮」提到「协议勾选」前面，但又不想改DOM顺序——这种细粒度控制才是它的合理用武之地。
