order属性仅在flex上下文中按数值相对优先级调整视觉顺序，不改html结构；需父容器设display:flex、子元素未脱离流、非display:none；数值越小越靠前，相同值按html源序排列。

用 order 属性调整 Flex 子元素的视觉顺序，关键不是“自由”乱设数值，而是**在 flex 上下文中按需设定相对优先级**。它不改变 HTML 结构，只改眼睛看到的位置。

必须先满足三个前提条件

order 不是万能开关，它只在特定环境下起作用：

• 父容器必须显式声明 display: flex 或 display: inline-flex（仅写 flex 不行）
• 目标子元素不能被踢出 Flex 流：比如加了 position: absolute、float、display: contents 或 visibility: hidden
• 子元素不能是 display: none——它完全不参与布局，order 自然无效

order 数值的含义不是“第几个”，而是“谁更靠前”

默认所有子元素 order: 0，它们按 HTML 顺序排列。设置不同数值后，浏览器会：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 把所有子元素按 order 值从小到大排序（负数排最前，如 -1 比 0 靠前）
• 相同 order 值的元素，退回按 HTML 源码顺序排列
• order: 2 不代表“排第二位”，只表示它比 order: 1 靠后、比 order: 3 靠前

配合主轴方向，决定上下还是左右移动

order 的效果取决于 flex-direction：

• 默认 flex-direction: row → 改变的是**从左到右**的顺序
• 设为 flex-direction: column → 改变的是**从上到下**的顺序
• 比如想让某个模块视觉上“沉底”，可设 flex-direction: column，再给它 order: 99（或更大），它就会出现在最后

响应式中容易踩坑的点

移动端常需重排内容顺序，但别只顾加 order，忘了清理：

• 小屏下如果用 display: none 隐藏侧栏，主内容的 flex-grow: 1 可能撑满全宽，反而变形
• 正确做法是在媒体查询里统一重置：@media (max-width: 768px) { .sidebar, .header { order: 0; } }
• 或者直接切回 flex-direction: column，让所有模块垂直堆叠，更自然

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！