flex-order（即order属性）仅改变Flex容器内子元素的视觉排列顺序而不影响DOM结构和语义，其默认值为0，数值越小越靠前，相同值者保持原始HTML顺序。
当CSS布局用Flexbox实现时，元素的视觉顺序和DOM顺序不一致，flex-order就是专门用来解决这个问题的——它只改变渲染顺序，不影响源码结构和语义。
flex-order 的核心逻辑
order 属性默认值是 0，数值越小越靠前，越大越靠后。它不改变文档流位置，也不影响 tab 键焦点顺序（除非同时调整 tabindex），只作用于 flex 容器内的子项排列。
- 所有未设置 order 的子项按 DOM 顺序排列，且 order 值为 0
- 设置了 order 的项会“插队”：比如 order: -1 的元素会排在所有 order: 0 元素之前
- 相同 order 值的元素，仍按原始 HTML 顺序排列
常见实用场景
响应式中需要不同断点下切换模块顺序，比如移动端把侧边栏移到内容下方，但又不想动 HTML 结构：
- 给侧边栏设
order: 2，主内容设order: 1，在小屏下生效 - 无障碍友好：保持语义化 DOM 顺序（如标题→正文→侧边栏），仅用 order 调整视觉布局
- 避免 JS 操作 DOM 重排，减少潜在性能与可维护性问题
配合 justify-content 和 align-items 更灵活
order 只管主轴方向的顺序，不影响对齐方式。比如：
立即学习“前端免费学习笔记（深入）”；
- 主轴为 row 时，order 控制左右顺序
- 主轴为 column 时，order 控制上下顺序
- 想让某个按钮“视觉上居右”，不要只靠 margin-left: auto，可结合 order + justify-content: flex-end 更可控
注意避坑点
order 不是万能的，容易忽略的细节：
- 父容器必须是 display: flex 或 display: inline-flex，否则 order 无效
- order 值支持负数、0、正数，但别用过大的绝对值（如 999），不利于后续维护
- 与 float、position: absolute 混用时，order 可能失效——flex 子项应避免脱离 flex 流
- 测试时记得检查键盘 tab 顺序，必要时用 tabindex 配合调整可访问性
基本上就这些。用好 order，能让布局更语义清晰、响应更轻量、维护更安心。
