order属性仅对flex容器的直接子元素生效，默认值为0；必须在父容器设置display:flex/inline-flex，且子元素不能有float、absolute或none；数值越小越靠前，相同值按HTML顺序。
flex 的 order 属性只对 flex 容器的直接子元素生效，且默认值是 0 —— 想靠它“全局重排”，不设容器或误加在嵌套子元素上，肯定没反应。
为什么 order 设了但顺序没变？
常见原因不是写错了属性，而是漏了前提条件：
-
display: flex或display: inline-flex必须加在父容器上，不是加在要排序的元素自己身上 -
order只影响 flex 子项的视觉顺序，不影响 DOM 结构和可访问性顺序（屏幕阅读器仍按 HTML 顺序读） - 如果子元素还设置了
float、position: absolute或display: none，order会失效 - IE10–11 需要加
-ms-flex-order前缀，纯order不认
order 的数值怎么理解？
它不是索引（比如 1 就是第一个），而是按数值升序排列：数值越小越靠前，相同值则按 HTML 原顺序保留。
示例：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<div class="container"> <div style="order: 2">A</div> <div style="order: -1">B</div> <div style="order: 0">C</div> </div>
渲染顺序是：B → C → A（因为 -1
- 负数完全合法，常用来把某个元素“提至最前”而不改其他元素的
order - 不必连续编号，跳着写（如 10、100、1000）也没问题，只比大小
- 避免用大整数（如 9999），后期维护容易冲突；推荐用 -2、-1、0、1、2 这类小范围值
移动端适配时 order 怎么配合媒体查询用？
这是 order 最实用的场景：同一组元素，在桌面端按 A-B-C 排，在手机端改成 C-A-B。
- 先统一设好基础
order（比如都为 0），再在媒体查询里覆盖 - 别在
@media里重复写整个 flex 布局，只改order即可，轻量又明确 - 注意：如果容器本身在媒体查询中切换了
flex-direction（比如从row改成column），order依然有效，它只管“主轴上的顺序”
示例：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.header { order: 2; }
.nav { order: 1; }
.logo { order: 0; }
}
真正容易被忽略的是：当多个 flex 容器嵌套时，order 只在当前容器内起作用。外层容器的 order 不会影响内层 flex 子项的顺序——这看似理所当然，但调试时常常误以为“全局 order 可叠加”。
