order属性仅在flex容器中生效，需父元素显式设置display: flex或inline-flex；IE10/11需-ms-flex-order前缀；CSS变量须用calc()转为数字；order相同则按DOM顺序排列。
order 属性必须配合 flex 容器才生效
单独给元素写 order: 2 没用，父容器没设 display: flex 或 display: inline-flex，order 直接被忽略。浏览器连解析都不解析这个属性。
常见错误现象：order 写了但元素顺序完全没变，检查父级是不是 div 默认的 display: block；或者用了 grid 却误以为 order 也管用（grid 用 grid-row / grid-column 控制位置）。
- Flex 容器必须显式声明，不能靠继承或隐式触发
- 如果容器是
flex-direction: column，order控制的是垂直顺序，不是视觉行内顺序——这点容易看错 - IE10/11 支持
order，但需要-ms-flex-order前缀（现在多数项目已不需兼容）
CSS 变量不能直接赋值给 order，得靠 calc() 或 var() 回退兜底
order 接收整数，而 CSS 变量默认是字符串。写成 order: var(--item-order) 在大多数浏览器里会当作无效值处理，回退到默认 order: 0。
正确做法是确保变量值被解析为数字。最稳的方式是用 calc() 强制转换：
div.item {
--item-order: 2;
order: calc(var(--item-order) * 1);
}
或者更直白地，在 JS 设置变量时就保证是数字（el.style.setProperty('--item-order', 3)），但 CSS 本身不校验类型。
- 不要写
order: var(--item-order, 0)—— fallback 不解决类型问题，照样失效 - 用
calc(var(--x) + 0)和calc(var(--x) * 1)效果等价，选哪个看团队习惯 - 若变量来自 :root，且需响应式切换，记得搭配媒体查询重设变量值，而不是改 class
动态重排时，order 变化会触发 layout，频繁操作可能卡顿
改变 order 值属于“布局属性变更”，浏览器必须重新计算 flex 项目顺序、尺寸、位置，比只改 opacity 或 transform 开销大得多。
典型高风险场景：在 scroll 或 mousemove 里实时更新多个元素的 --item-order；或用 setInterval 每 16ms 切一次顺序。
- 优先考虑用
transform: translateY()模拟位移，视觉一致但不触发布局 - 真要重排，把变化批量聚合，比如用
requestAnimationFrame统一更新变量，避免连续强制同步布局 - 移动端尤其敏感，iOS Safari 对 flex 重排的优化不如 Chrome，实测卡顿更明显
order 值相同时，DOM 顺序仍是最终 fallback
当两个元素 order 值一样（比如都是 1），它们在 flex 容器里的相对位置，完全由 HTML 中的书写顺序决定——CSS 不会再干预。
这在用 JS 动态插入元素时特别容易出问题：你设了 --item-order: 0，但新节点插在末尾，它还是排最后，因为 DOM 顺序压倒同值 order。
- 想严格按变量控制顺序，就得保证所有元素初始都在容器里，用
display: none或visibility: hidden控制显隐，别删 DOM - 服务端渲染或 SSR 场景下，注意首屏 HTML 的节点顺序是否和预期
order匹配，否则闪动明显 - 调试时可临时加
outline: 1px solid red看真实渲染顺序，比光看 DevTools Styles 面板更可靠
实际用下来，最难缠的不是语法，是 order 和 DOM 顺序、JS 插入时机、CSS 变量类型这三者的隐式耦合。改一个地方，另外两个可能悄悄翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
