order属性用于调整Flexbox子元素的显示顺序，默认值为0，数值越小越靠前。通过设置不同order值可改变视觉排列而不影响HTML结构，例如.item2（order:1）会排在.item1（order:2）之前。在响应式设计中，结合媒体查询可实现移动端内容重排，如使作者信息在小屏幕时位于文章上方。该属性仅对flex子元素生效，不影响DOM结构与可访问性，负值有效（如order:-1置顶），但应避免滥用以防止语义混乱。关键在于它只改变视觉顺序，不改变文档流和交互逻辑。
在CSS中，使用Flexbox布局时可以通过 order 属性来调整子元素的显示顺序，而不必改变HTML结构。这个属性特别适合在响应式设计中重新排列内容，比如在移动端把侧边栏移到主内容下方。
什么是order属性
order 属性定义了flex子元素在容器中的排列顺序。默认情况下，所有子元素的 order 值为 0，元素按照HTML中的书写顺序排列。当设置了不同的 order 值时，元素会根据数值从小到大重新排序。
数值越小，越靠前；相同数值的元素保持原有顺序。
如何使用order调整顺序
给flex容器内的子元素设置 order 属性即可控制其显示位置：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
.container {
display: flex;
}
.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
上面代码中，尽管HTML顺序是 item1、item2、item3，但实际显示顺序会是：item2（order 1）、item1（order 2）、item3（order 3）。
响应式设计中的实用场景
在不同屏幕尺寸下调整内容顺序非常实用。例如，希望在手机上先显示文章内容，再显示作者信息：
.content { order: 2; }
.author-info { order: 1; }
@media (min-width: 768px) {
.content { order: 1; }
.author-info { order: 2; }
}
这样在小屏幕上作者信息会出现在内容之前，而在桌面端恢复默认布局。
注意事项
使用 order 属性时需注意以下几点：
- 只对flex容器的直接子元素生效
- 不影响DOM结构或可访问性（如屏幕阅读器仍按HTML顺序读取）
- 避免过度使用，以免造成维护困难或语义混乱
- 负值有效，例如 order: -1 会使元素排在最前面
基本上就这些。order属性简单却强大，配合flex-direction和媒体查询，能灵活应对各种布局需求。关键是理解它只改变视觉顺序，不改变文档流和交互逻辑。
