在CSS弹性盒子布局中，子元素的默认显示顺序和HTML文档流中的顺序一致，但很多时候我们会因为响应式需求或者特殊布局要求，遇到子元素显示顺序和预期不符的情况，这时候不需要调整HTML结构，使用order属性就能快速调整。
order属性的基本规则
order是弹性盒子子元素的专属属性，用来定义子元素的排列顺序，它的取值是整数，默认值为0。排列规则非常简单：order值越小的元素，排列位置越靠前；如果多个元素的order值相同，则按照HTML结构的先后顺序排列。
基础使用示例
我们先看一个基础案例，HTML结构中有三个弹性子元素，默认顺序为A、B、C，我们希望调整为B、A、C的显示顺序：
<div class="flex-container"> <div class="item item-a">A</div> <div class="item item-b">B</div> <div class="item item-c">C</div> </div>
对应的CSS样式如下，给B元素设置更小的order值，就能让它排到最前面：
.flex-container {
display: flex;
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
.item {
width: 80px;
height: 80px;
margin: 10px;
text-align: center;
line-height: 80px;
background-color: #f0f0f0;
}
/* 给B元素设置order为-1，比默认的0小，所以排到最前面 */
.item-b {
order: -1;
background-color: #a0d8ff;
}
运行后可以看到，三个元素的显示顺序变成了B、A、C，完全符合我们的预期。
常见顺序错乱场景及解决
场景1：响应式布局中顺序调整
在移动端和PC端布局不同时，经常需要调整元素顺序，比如PC端侧边栏在右侧，移动端侧边栏在内容下方，用order属性就能轻松实现：
/* PC端默认顺序：内容 侧边栏 */
.flex-container {
display: flex;
}
.content {
order: 1;
flex: 1;
}
.sidebar {
order: 2;
width: 200px;
}
/* 移动端调整顺序：侧边栏 内容 */
@media (max-width: 768px) {
.sidebar {
order: 0;
}
.content {
order: 1;
}
}
场景2：解决默认排列导致的顺序问题
如果弹性盒子设置了flex-direction: row-reverse或者flex-direction: column-reverse，子元素会默认反向排列，这时候可以通过order属性把顺序调整回来：
.flex-container {
display: flex;
flex-direction: row-reverse; /* 默认反向排列 */
}
/* 给三个元素分别设置order为1、2、3，恢复正向顺序 */
.item:nth-child(1) { order: 1; }
.item:nth-child(2) { order: 2; }
.item:nth-child(3) { order: 3; }
order属性的注意事项
- order属性只会影响弹性盒子子元素的视觉排列顺序，不会改变HTML的文档结构，也不会影响键盘导航、屏幕阅读器等无障碍访问的顺序，这一点需要特别注意。
- order的取值可以是负数，负数会比默认的0值更靠前，方便我们把元素放到最前面。
- 如果只需要调整少量元素的顺序，不需要给所有子元素都设置order，只需要给需要调整的元素的order值设置为比默认0小或者大即可。
通过order属性调整弹性盒子子元素顺序是非常高效的方案，不需要修改HTML结构，只需要添加几行CSS就能实现需求，熟练掌握这个属性能大幅提升弹性盒子布局的开发效率。