order属性通过调整Flex子项在主轴上的渲染位置来控制显示顺序，不改变DOM结构；默认值为0，数值越小越靠前，相同时按HTML源码顺序排列，仅对display: flex容器的直接子元素生效。
Flex布局中order属性控制显示顺序的原理
order不是改变DOM顺序，而是调整Flex容器内子项在主轴上的渲染位置。它的默认值是0，数值越小越靠前，相同时按HTML源码顺序排列。这个属性只对Flex子项生效，对普通块级元素或Grid项完全无效。
常见错误现象：给非Flex子元素加order没反应；或者在未设display: flex的父容器里写order，CSS直接忽略。
- 必须确保父容器有
display: flex或display: inline-flex -
order接受整数（正、负、零），不支持小数或单位（如order: 1px非法） - 改变
order不会触发重排（reflow），但会触发重绘（repaint），性能开销低
多个order值混用时的实际排序逻辑
当多个子项order值不同时，浏览器按数值升序排列；值相同时，退回到HTML文档流顺序——这点容易被忽略，导致“明明设了相同order，但位置还是变了”。
使用场景：比如表单中把提交按钮视觉上提至最前，但保持它在DOM末尾便于语义和可访问性。
div.container {
display: flex;
}
div.item:nth-child(1) { order: 2; }
div.item:nth-child(2) { order: -1; }
div.item:nth-child(3) { order: 0; }
最终视觉顺序是：第2个 → 第3个 → 第1个。注意第2个元素order: -1比0和2都小，所以最先显示。
order和flex-direction组合使用的坑
order始终基于主轴方向排序，而主轴由flex-direction决定。设成column或column-reverse时，order影响的是垂直方向的位置，不是水平方向。
典型错误：在flex-direction: column-reverse下还按“从左到右”理解order，结果视觉顺序和预期相反。
-
flex-direction: row→order控制左→右顺序 -
flex-direction: row-reverse→order仍控制左→右顺序，但主轴反向，所以数值小的反而在右边 -
flex-direction: column→order控制上→下顺序
IE11对order的支持限制和降级方案
IE11支持order，但存在两个关键缺陷：不支持负值（order: -1会被当成0）；在某些嵌套Flex场景下计算错乱。
如果项目需兼容IE11，不要依赖负order，统一用非负整数，并预留足够间隔（比如用10、20、30代替0、1、2，方便后续插入）。
更稳妥的降级思路是：用flex-direction: row-reverse + 调换HTML顺序，或用JS动态插入节点——但仅在真正需要且CSS无法覆盖时才动用。
复杂点在于，order本身不改变tab键焦点顺序、屏幕阅读器读取顺序或打印样式，这些仍按DOM顺序。如果可访问性是硬需求，光靠order不够，得配合aria-order或结构重构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
