先记住这个答案
把购买按钮写成 order: -1 可以让它视觉上排到前面，但键盘按 Tab 的顺序通常还是按文档顺序走。order 只参与 Flex 的布局排序；同值项目继续按源代码顺序排列。这个属性适合不影响理解顺序的轻微视觉调整，关键交互顺序应在 DOM 中安排好，再检查屏幕阅读器与键盘路径。
order小的项目视觉上靠前- 同值项目按 DOM 顺序排列
- Tab 顺序通常仍跟随 DOM
- 重要的阅读顺序应改标记结构
购买按钮视觉提前的代价
响应式页面想把“立即购买”按钮在手机上挪到介绍文字之前，给按钮设 order: -1 看起来最省事。但键盘用户按 Tab 仍会按 DOM 顺序访问控件，焦点可能从画面下方突然跳到上方。若顺序变化承载阅读或操作含义，优先调整 DOM 结构；order 更适合装饰性或不影响理解的小范围展示调整。
.actions {
display: flex;
gap: 12px;
}
.primary { order: -1; /* 视觉上排到默认项前面 */ }
.secondary { order: 0; }
/* DOM 与焦点顺序仍由标记决定 */示例中的主按钮视觉上提前，DOM 与 Tab 顺序不因此提前。
视觉排序不修改文档顺序
Flex 排列先按 order 形成“排序后的顺序”，再按 flex-direction 的主轴方向摆放。因此 row-reverse 又会反转视觉方向，但 DOM 本身仍没重排。自动换行时，排线同样按排序后的项目顺序进行。屏幕阅读器读取的是文档语义顺序，CSS 无法把它变成新的阅读结构；用正的 tabindex 硬补焦点顺序，通常只会让维护更困难。
还有一个常被忽略的组合：换行容器里，order 在分行之前参与排序。把第三个项目改为 order: -1，不仅它跑到第一行前面，也可能挤得原本在第一行的项目进入下一行。这不是只在同一行内移动位置。若页面是步骤条或表单字段，视觉顺序与屏幕阅读器朗读顺序不一致会直接影响操作；这时应调整数据源或 DOM，而非叠加更多 order 数值来修补。
还需注意 order 默认是零，负值可以放到普通项目之前，正值可以排到之后，但它不是永久编号。动态列表里新增一个相同 order 的项目，会按 DOM 中的位置插入同值项目组。依赖一串硬编码数字维护重要业务顺序，后续改动很容易产生意外。
容易答错的地方
- 说
order改变了 DOM - 开发者工具中的节点和脚本遍历顺序都没有变化。它改变的是 Flex 或 Grid 布局的视觉位置。
- 用
tabindex强行模拟视觉顺序 - 焦点顺序只是可访问性的一部分，阅读顺序和表单语义仍来自 DOM。先把标记顺序写对。
面试官还会怎么问？
同一个 order 值的项目谁在前？
保持它们在 DOM 中的先后次序；排序是稳定的。
Grid 项也能用 order 吗？
能。它也只影响布局上的顺序，不会替你修改 DOM 或无障碍阅读顺序。
什么时候可以使用 order？
当视觉重排不影响理解和操作流程，例如一组非交互的装饰卡片调整显示位置，可以使用，但仍应检查窄屏和键盘访问。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。