order属性可改变弹性子元素视觉顺序，默认值为0，值越小越靠前，如.item1{order:2}、.item2{order:1}、.item3{order:3}时显示为B、A、C，适用于响应式布局调整，但不影响DOM结构与可访问性，仅对flex容器的直接子元素生效。
在弹性布局（Flexbox）中，order 属性可以改变子元素的显示顺序，而不影响它们在 HTML 中的实际结构。默认情况下，所有弹性子元素的 order 值为 0，按照文档流顺序排列。通过设置不同的 order 值，可以灵活调整它们在容器中的视觉顺序。
基本语法
给弹性容器内的子元素设置 order 属性：
.item { order: <整数值>; }
值越小，越靠前；值相同则按 HTML 顺序排列。
实际应用示例
假设有一个弹性容器和三个子元素：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="item item1">A</div> <div class="item item2">B</div> <div class="item item3">C</div> </div>
CSS 设置：
.container { display: flex; } .item1 { order: 2; } .item2 { order: 1; } .item3 { order: 3; }
此时视觉顺序变为：B（order 1）、A（order 2）、C（order 3）。
使用场景与注意事项
order 适合用于响应式设计中调整内容展示顺序，比如在移动端将导航移到内容前面。
- 只影响视觉顺序，不影响 DOM 结构和屏幕阅读器读取顺序，注意可访问性
- 负数有效，如 order: -1 的元素会排在 order: 0 之前
- 非整数会被向下取整，例如 order: 2.9 实际等效于 order: 2
- 必须作用于弹性容器的直接子元素才生效
基本上就这些，合理使用 order 能让布局更灵活。