order属性仅改变视觉顺序，不改变DOM结构、焦点流及可访问性；失效主因是父容器未设display:flex/inline-flex、子元素脱离文档流或非直接子元素。
父容器必须是flex，否则order完全不生效
写了order: -1却没反应？八成是父容器没设display: flex或display: inline-flex。浏览器遇到非Flex容器时，直接忽略order属性——DevTools的Computed面板里甚至不会列出它。
常见踩坑点：
- 父级被第三方组件覆盖，比如某个UI库强制加了
display: contents或display: block - 误用
display: grid后还写order（Grid里该用grid-row） - 子元素加了
position: absolute或float，脱离Flex流后order失效
移动端顺序切换要靠媒体查询+显式order值
不能只改一个元素的order就以为能“交换位置”。视觉顺序是全局排序结果，所有相关子项的order值必须构成一套可预测的相对关系。
典型响应式写法（移动端内容优先）：
.container { display: flex; }
.content { order: 1; }
.sidebar { order: 2; }
.header { order: 0; }
<p>@media (max-width: 768px) {
.content { order: 0; }
.sidebar { order: 2; }
.header { order: 1; }
}</p>
关键点：
- 每个断点下，所有参与排序的元素都得有明确
order值，别留默认0混用 - 数值间隔留余量（比如用0/10/20），方便后续插入新元素
- 避免用
order: 1和order: 2紧挨着，万一中间要插个广告位就只能重调全部
CSS变量动态设order必须过calc()转换
order: var(--sort)在所有主流浏览器中都会退化为order: 0——因为CSS变量是字符串，而order只认整数。
可靠写法只有两种：
order: calc(var(--sort) * 1)order: calc(var(--sort) + 0)
JS里设变量也得同步处理：
el.style.setProperty('--sort', '2');
// 但CSS里必须写 calc(var(--sort) * 1)，不能依赖 fallback
order改的是视觉顺序，不是DOM或焦点流逻辑
写了order: -1让某元素显示最前，但document.querySelector('.container').children[0]拿到的还是HTML里第一个元素。JS逻辑若依赖children索引，就会出错。
更隐蔽的风险：
- 键盘
Tab焦点顺序会跟着order变，但屏幕阅读器可能仍按DOM顺序朗读（取决于实现） - 如果用
focus()手动聚焦某个元素，它的实际tabindex位置可能和视觉位置不一致 - 测试时只看页面渲染是不够的，必须关掉鼠标、纯键盘操作一遍
真正容易翻车的地方不在怎么写CSS，而在改完order后，还照旧用children[0]取元素、或只靠眼睛确认顺序就上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
