order属性失效最常见原因是父容器未设display: flex或子元素脱离文档流；它仅对标准流中的Flex项目生效，且不改变语义与可访问性。
order 属性为什么没生效
最常见的原因是父容器没设 display: flex，或者子元素被设了 float、position: absolute 这类脱离文档流的样式 —— order 只对 Flex 项目起作用，且只在标准流中生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先确认父容器有
display: flex或display: inline-flex - 检查子元素是否意外加了
float（Flex 布局下float会被忽略，但可能干扰你对布局的判断） - 避免给子元素设
position: absolute，否则它不再是 Flex 项目，order完全无效 - 注意：
order默认值是0，不是1；负值合法，比如-1会排在所有0前面
order 和 DOM 顺序不一致时，可访问性怎么处理
视觉上靠 order 调整了位置，但屏幕阅读器仍按 HTML 源码顺序读取 —— 这会造成认知断层，尤其对视障用户。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果 UI 逻辑依赖顺序变化（比如表单步骤、新闻卡片优先级），优先用 JS 动态重排 DOM，而不是仅靠
order - 若必须用
order，配合aria-order无意义（该属性不存在），正确做法是加aria-labelledby或aria-describedby显式说明关系 - 测试时用 Chrome DevTools 的「Accessibility」面板，或 NVDA / VoiceOver 实际朗读，验证语义流是否合理
多个 order 值相同时怎么排序
当几个子元素 order 值一样，它们就退回原始 DOM 顺序 —— 不是“随机”，也不是“按 CSS 书写顺序”，就是 HTML 标签出现的先后。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别依赖“同 order 下的隐式顺序”做关键逻辑，比如轮播图切换、导航高亮，容易因模板渲染顺序微调而翻车
- 需要稳定次序时，显式设不同
order值，哪怕只差 1（如1、2、3） - 注意：CSS 自定义属性不能直接用于
order（order: var(--my-order)合法，但 IE 不支持，且无法 fallback）
移动端 Safari 对 order 的兼容细节
iOS 9.3+ 支持 order，但旧版 Safari（特别是 iOS 10 以下）对负值 order 渲染有 bug：可能把 order: -1 的元素挤出容器，或与其他元素重叠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
order: -999这类极端值；用order: -1或order: 1等小整数更稳妥 - 真要兼容 iOS 10-，可用
@supports (order: 1)做特性检测，降级为 JS 重排或媒体查询 +flex-direction: column-reverse - 注意：Safari 对
order动画支持弱，transition: order 0.3s在部分版本无效，改用transform: translateX()模拟更可靠
