order属性只改变flex子元素的视觉顺序，默认值为0，数值越小越靠前，相同值按html源码顺序排列，不影响dom结构、语义顺序及屏幕阅读器读取顺序。
Flex 布局里没有“排列优先级”这个概念——order 控制的是视觉顺序，justify-content 和 align-items 控制的是对齐位置，三者互不覆盖、也不构成优先级层级。所谓“多个子元素的排列优先级”，实际是开发者对 order 与对齐属性协同效果的误读。
为什么 order 设置后元素没按预期移动
这不是值写错了，而是布局前提缺失或被其他样式干扰：
- 父容器没设
display: flex或display: inline-flex—— 浏览器直接忽略order，DevTools 里该属性会显示为灰色或划掉 - 目标元素不是直接子项（中间嵌了 wrapper），或被
position: absolute/float脱离文档流 - 用了
flex-direction: column-reverse却仍按“从上到下”理解order：此时数值小的元素会出现在容器底部，而非顶部 - IE11 下设了负值（如
order: -1）会被当成0，导致重排失效
order 和 justify-content / align-items 是什么关系
order 只决定“谁先谁后”，justify-content 和 align-items 决定“怎么摆”。它们作用维度不同，不会互相覆盖：
-
justify-content按主轴方向（由flex-direction决定）统一调整所有项目的对齐，不影响彼此相对顺序 -
align-items在交叉轴上统一控制所有项目在垂直/水平方向的位置，和order完全无关 - 给某个元素加
margin-left: auto或margin-top: auto，会把它推到主轴/交叉轴末端——这会覆盖justify-content/align-items，但依然尊重order的先后顺序
多个 order 值冲突时怎么算
没有“冲突”，只有明确的升序规则：
- 所有元素按
order数值从小到大排列；负数-2比-1更靠前，0是默认值，999不代表“最后”，只是比所有小于它的值都靠后 - 相同
order值的元素，严格按 HTML 源码顺序排列——DOM 顺序在此刻起作用，不是随机也不是“看谁样式写在后面” - 不要用大正整数（如
order: 1000）强行压底，应统一设为order: 1，把想提前的设为order: -1，逻辑更清晰且兼容性更好
真正容易被忽略的可访问性问题
order 改变的只是渲染顺序，键盘 Tab 流、屏幕阅读器朗读顺序、搜索引擎抓取顺序，全部按 HTML 原始结构走。把“提交按钮”用 order: -1 提到表单最前面，用户用键盘 tab 时依然得从表单开头一路 tab 过来——这不是 bug，是规范行为。如果内容逻辑顺序和视觉顺序必须一致（比如导航、表单、文章主体），优先重构 HTML，而不是依赖 order。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
