order 属性未生效是因为父容器未设置 display: flex（或 inline-flex），或子元素被 display: none、Float、absolute 等脱离文档流的样式干扰；其仅对 flex/grid 子元素有效，且不影响 dom 顺序和可访问性。
order 属性为什么没生效？检查 display 和 flex 容器是否正确
order 只对 flex 或 grid 子元素起作用，如果父容器没设 display: flex，或者子元素被 display: contents / visibility: hidden 干扰，order 就完全不触发。常见误操作包括：只给子元素加 order，却忘了给父级加 display: flex；或父级用了 inline-flex 但高度塌陷导致视觉上“没变”。
- 确保父容器有
display: flex（或inline-flex） - 子元素不能是
display: none——order对它无效 - 避免用
float、position: absolute混用，会脱离 flex 流 - 注意
order默认值是0，不是1，负值合法（如-1）
动态改 order 要用 javaScript，别直接写死在 html 里
想让顺序随用户操作变化（比如点击切换排序），必须用 js 修改 style.order 或切换 class。硬编码 style="order: 2" 在 HTML 中无法响应式更新。
- 推荐用 class 控制：
.order-first { order: -1; }，然后el.classlist.toggle('order-first') - 直接设内联样式：
el.style.order = '2'（注意字符串，不是数字） - 批量重排时，避免逐个设
order，改用数据驱动：按新顺序把元素appendChild()到容器中更可靠（order不影响 DOM 结构，只影响渲染顺序）
order 会影响可访问性吗？会影响屏幕阅读器顺序
order 改变的是视觉顺序，但 DOM 顺序不变 —— 这会导致键盘 Tab 顺序、屏幕阅读器朗读顺序仍按原始 HTML 排列，和看到的不一致。这是 WCAG 不推荐的模式。
- 如果顺序变化是功能必需（如“置顶评论”），需同步用
aria-flowto或tabindex修正焦点流 - 纯展示类重排（如卡片网格换列）影响较小；但涉及表单控件、导航链接时务必测试键盘操作
- 不要依赖
order实现语义化结构变更，该用flex-direction: column-reverse或真实 DOM 移动就移动
和 flex-direction 冲突吗？order 总是最后计算
order 的计算优先级高于 flex-direction 和 flex-wrap。无论 flex-direction 是 row 还是 column，order 都先按数值从小到大排列元素，再按方向布局。所以它不会“失效”，但可能和预期视觉不符。
立即学习“前端免费学习笔记（深入）”；
- 例如：两个子项
order: 1和order: 0，在flex-direction: column-reverse下，order: 0仍显示在下方（因为先排好序，再翻转列） -
order值相同时，才按源顺序（HTML 顺序）排列 - 性能无明显损耗，但大量元素频繁改
order（如每帧）可能触发重排，建议节流
实际重排逻辑很直白：浏览器先收集所有 flex 子项，按 order 值升序分组，同组内保持原始 DOM 顺序，最后按 flex-direction 和 flex-wrap 渲染 —— 所以它不改变 DOM，也不影响 JS 查询结果，这点容易被忽略。