Flex布局中order属性可调整元素视觉顺序而不改变HTML源顺序，其默认值为0，数值越小越靠前，负数合法，相同值时按DOM顺序排列，且不影响语义与可访问性。
在 Flex 布局中，元素的显示顺序可以通过 order 属性来调整，它不改变 HTML 结构中的源顺序，只影响视觉排列。
order 属性的基本用法
order 是作用在 Flex 项目（即子元素）上的属性，默认值为 0。数值越小，元素在主轴上越靠前；数值越大，越靠后。负数也合法，比如 -1 会排在默认项前面。
- 所有子元素未设置
order时，按 HTML 中的书写顺序显示 - 设置了
order后，Flex 容器会按数值升序重新排列这些项目 - 多个元素 order 值相同时，仍按原始 DOM 顺序排列
实际调整顺序的操作步骤
要调整某个元素的位置，只需给它添加 order 值即可，无需改动 HTML 结构。
pSEO Generator
下载
大规模构建程序化 SEO 2.0 系统——采用严格定义的 JSON Schema、垂直领域分类体系（niche taxonomy）及 React 渲染器实现 AI 生成内容。适用于以下场景：(1) 创建海量…
- 想把第三个元素移到最前面？给它设
order: -1 - 想把第一个元素移到最后？给它设
order: 99（或比其他都大的数） - 需要整体倒序？可配合 CSS 计数器或 JS 动态赋值，但纯 CSS 中需逐个指定
order
注意 order 不影响语义和可访问性
order 只控制视觉渲染顺序，对屏幕阅读器、Tab 键焦点流、SEO 等没有影响。如果逻辑顺序与视觉顺序差异大，可能降低可访问性。
立即学习“前端免费学习笔记（深入）”；
- 重要内容仍应尽量保持合理的 DOM 顺序
- 若必须视觉错位（如移动端隐藏侧栏、PC端显示），
order是安全的选择 - 避免用
order实现“跳过”式布局（如把表单提交按钮提到开头），建议用更语义化的方式处理
与其他 Flex 属性的配合
order 通常和 flex-direction、justify-content 等协同使用，但要注意：它只在 Flex 容器内生效，且优先级高于文档流顺序。
- 当
flex-direction: column时，order控制的是垂直方向的上下顺序 - 与
flex-wrap: wrap共用时，order仍按整体主轴排序，不区分行 - 慎与
position: absolute混用——绝对定位元素已脱离 Flex 流，order对其无效
