order属性用于控制flex子项的显示顺序，默认值为0，数值越小越靠前，可实现不修改HTML结构的视觉重排，适用于响应式设计与无障碍优化。
在使用 Flex 布局时，如果需要调整子元素的显示顺序，可以直接使用 CSS 的 order 属性，而无需改动 HTML 结构。这个属性专门用于控制 flex 子项在容器中的排列顺序。
什么是 order 属性？
order 属性定义了 flex 子元素在主轴上的排序级别。默认情况下，所有子元素的 order 值为 0，元素按照它们在 HTML 中出现的顺序排列。通过设置不同的数值，可以改变它们的显示次序。
数值越小，元素越靠前；数值相同则按 HTML 顺序排列。
如何使用 order 属性？
确保父容器是 flex 布局，然后为子元素设置 order 值：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 给父元素设置 display: flex;
- 为子元素添加 order 数值（可以是负数、0 或正数）
.container {
display: flex;
}
.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }
尽管 item1 在 HTML 中排第一，但最终显示顺序会是：item2 → item3 → item1。
实际应用场景
这个特性特别适合在响应式设计中调整布局结构。比如在移动端，希望将页脚内容显示在主体内容之前，就可以通过修改 order 实现，而不必操作 DOM。
- 移动优先设计中调整模块顺序
- 无障碍访问优化：保持语义化 HTML 顺序的同时调整视觉顺序
- 卡片式布局中动态切换展示优先级
注意事项
order 只影响视觉顺序，不影响 DOM 结构和键盘导航顺序。因此要确保可访问性不受影响。
- 避免过度依赖 order 来重构页面逻辑
- 屏幕阅读器仍按 HTML 顺序读取内容
- 建议配合 tabindex 等属性优化交互体验
基本上就这些。用好 order 能让你更灵活地控制布局，尤其在不修改 HTML 的前提下实现视觉重排，非常实用。
