order属性仅在flex或grid容器的直接子元素上生效，父容器必须设display: flex/inline-flex或grid，否则被忽略；其排序依据数值相对大小而非绝对值，且不支持css过渡。
order属性只在flex容器里生效
直接给子元素写 order 却没效果？大概率是父容器没设 display: flex 或 display: inline-flex。CSS 的 order 不是全局排序工具，它只作用于 Flex 布局的直接子元素。
- 父元素必须是 Flex 容器，否则
order完全被忽略（连 warning 都不报） - Grid 布局也支持
order，但行为和 Flex 不同——Grid 中它只影响源顺序，不改变网格线定位，容易误判 - 绝对定位、浮动或
display: contents的子元素会脱离 Flex 格式化上下文，order失效
order数值越小越靠前，但别迷信“1、2、3”连续编号
order 默认值是 0，所有没显式设置的子元素都按 HTML 源顺序排在 order=0 的组里。真正起作用的是相对大小关系，不是绝对数字。
- 可以写
order: -99把某项提到最前，order: 99推到最后——没必要拘泥正整数 - 多个元素用相同
order值时，它们内部仍按源顺序排列，不会乱序 - 避免用动态计算出的浮点数（比如
order: 1.5），虽然语法合法，但可读性差且无实际优势
和justify-content、flex-direction混用时顺序逻辑会变
Flex 主轴方向变了，order 的“前后”含义也跟着变。比如 flex-direction: column-reverse 下，order: 0 的元素实际出现在视觉最下方。
-
order决定的是**在主轴上的位置顺序**，不是屏幕坐标意义上的“上/下”或“左/右” - 配合
justify-content: flex-end时，所有元素整体右对齐/底对齐，但彼此间的order相对关系不变 - 想让视觉顺序和源顺序完全一致？别依赖
order，改用 JS 重排 DOM 或 CSS Grid 的grid-area
移动端 Safari 旧版本有 order 渲染延迟问题
iOS 12 及更早的 Safari 在某些组合下（比如配合 transform 动画或快速切换 order 值）会出现子元素闪动或顺序错乱，不是 bug 是渲染管线未及时同步。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：触发一次强制重排，比如读取
offsetHeight后再改order - 更推荐方案：用
flex-direction: column-reverse+order组合替代频繁修改order，减少重排压力 - 如果要动画切换顺序，别对
order做 CSS transition——它不支持过渡，只能用 JS 控制 class 切换 +transform模拟
order 是个轻量级重排工具，适合静态结构微调；一旦涉及条件分支、响应式切换或用户交互，它的维护成本和边界情况比想象中高。 
