Flex 元素可用 order 属性调整视觉顺序而不改变 HTML 结构；默认值为 0，数值越小越靠前，负数合法，仅作用于直接子元素，不影响语义与 SEO，支持响应式切换。
Flex 元素的显示顺序和 HTML 结构顺序不一致时，不用改 HTML，直接用 order 属性就能调整视觉顺序。
order 属性的基本用法
默认情况下，所有 flex 项目 order 值为 0。数值越小，越靠前；数值越大，越靠后。负数也合法，比如 -1 会排在 0 前面。
- 只对 flex 容器的直接子元素生效
- 不影响 DOM 结构或语义顺序（对屏幕阅读器、SEO 无影响）
- 可以配合媒体查询做响应式顺序切换
常见调整场景示例
比如一个三栏布局：左侧导航、中间内容、右侧广告。在移动端希望内容优先显示，可以把中间内容的 order 设为 -1：
.main { order: -1; }
.sidebar { order: 1; }
.ads { order: 2; }
这样 HTML 里还是按 nav-main-ads 写，但手机上渲染顺序变成 main-nav-ads。
立即学习“前端免费学习笔记（深入）”；
注意 order 的“相对性”
order 不是绝对编号，而是排序依据。多个元素设相同 order 值，它们就按 HTML 原顺序排列。例如：
- A: order: 0
- B: order: 0
- C: order: 1
那么 A 和 B 保持原有前后关系，整体排在 C 前面。
调试小技巧
开发时快速验证 order 效果，可以在浏览器控制台临时加样式：
右键元素 → “检查” → 在 Styles 面板里手动输入 order: -2 看效果确认无误后再写进 CSS 文件。
