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 顺序排列。设置不同数值后，浏览器会：
- 把所有子元素按
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，让所有模块垂直堆叠，更自然
