order属性在flex布局中按数值从小到大调整子元素视觉顺序，默认值为0，负数前置，正数后置，不影响DOM结构。示例中元素2（order-1）最先显示，其次元素3（order1），最后元素1（order2）。结合媒体查询可实现响应式重排，如小屏幕时将侧边栏order设为2，使其位于主内容之后，仅改变视觉呈现，不改变HTML结构。
使用 CSS 的 order 属性可以灵活地调整 Flex 容器中子元素的显示顺序，而无需改变 HTML 结构。这个属性只在 Flex 布局（即父容器 display: flex）中生效。
理解 order 属性的基本规则
order 属性接受一个整数值（正数、负数或零），默认值为 0。子元素会按照 order 值从小到大排列，值越小越靠前，相同值的元素则按 HTML 中的源顺序排列。
- 每个子元素的默认 order 值是 0
- 设置负数可以让元素排在前面
- 设置正数可以让元素排在后面
- 顺序仅影响视觉呈现，不影响 DOM 结构和屏幕阅读器顺序
实际应用示例
假设有一个 flex 容器包含三个子元素：
<div class="container"><div class="item item1" style="order: 2;">1</div>
<div class="item item2" style="order: -1;">2</div>
<div class="item item3" style="order: 1;">3</div>
</div>
尽管 HTML 中顺序是 1-2-3，但最终显示顺序会是：2（order -1）、3（order 1）、1（order 2）。
立即学习“前端免费学习笔记（深入）”；
响应式布局中的使用技巧
结合媒体查询，可以用 order 实现不同屏幕尺寸下的内容重排。比如在移动端把侧边栏移到主内容下方：
.container {display: flex;
}
.sidebar {
order: 1;
}
.main-content {
order: 0;
}
@media (max-width: 768px) {
.sidebar {
order: 2;
}
}
这样在小屏幕上，侧边栏就会显示在主内容之后。
基本上就这些。只要父容器是 flex 布局，给子元素设置 order 值就能控制它们的视觉顺序，简单直接，适合做布局微调或响应式重构。
