order属性用于Flexbox布局中控制子元素的排列顺序，数值越小越靠前。默认值为0，通过设置不同数值可改变视觉顺序，如order:-1的元素排在最前。使用时需将父容器设为display:flex，仅对直接子元素生效，不影响DOM结构和屏幕阅读器顺序，适用于响应式设计中的布局调整，但应注意可访问性和语义化结构，避免过度依赖。
在使用CSS进行布局时，有时需要临时调整子元素的显示顺序，而不改变HTML结构。这种情况下，order属性就非常实用，尤其是在Flexbox布局中，它能让你灵活控制子元素的排列顺序。
什么是order属性？
order 是CSS中的一个属性，专门用于Flex容器中的子元素，定义它们在主轴上的排列顺序。默认情况下，所有子元素的order值为0，元素按照HTML中的书写顺序排列。
通过给子元素设置不同的order值，可以改变它们的视觉顺序，数值越小越靠前，支持负数。
如何使用order改变子元素顺序？
要使用order属性，需确保父容器是flex布局。以下是基本用法：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 将父元素设置为 display: flex;
- 在需要调整顺序的子元素上设置 order: 数值;
.container {
display: flex;
}
.item1 { order: 2; }
.item2 { order: -1; }
.item3 { order: 0; }
在这个例子中，.item2会最先显示（order最小），然后是.item3，最后是.item1。
适用场景与注意事项
order适合用于响应式设计中，比如在移动端希望调换标题和按钮的位置，或在卡片布局中调整内容区块顺序。
但要注意：
- order只影响视觉顺序，不影响DOM结构和屏幕阅读器的读取顺序，对可访问性有影响时需谨慎使用。
- 仅对flex项目（flex container的直接子元素）生效，在grid布局中也支持。
- 避免过度依赖order来重构页面逻辑，应优先考虑语义化HTML结构。
基本上就这些。合理使用order属性，可以在不改动HTML的前提下，快速实现布局顺序的灵活调整。
