在Flex布局的实际开发中，经常需要调整子元素的排列顺序，将最后一个子元素放到首位展示是常见需求，我们可以通过Flex布局的原生属性轻松实现这个效果。
核心实现方案：使用order属性
Flex布局为每个子元素提供了order属性，用于控制元素在容器中的排列顺序，默认值为0，数值越小的元素排列越靠前。我们只需要将最后一个子元素的order值设置为比所有其他元素更小的值，就能让它排到首位。
基础实现示例
HTML结构如下，最后一个子元素是item-last：
<div class="flex-container"> <div class="flex-item">第一个元素</div> <div class="flex-item">第二个元素</div> <div class="flex-item">第三个元素</div> <div class="flex-item item-last">最后一个元素</div> </div>
对应的CSS样式代码：
.flex-container {
display: flex;
/* 可选：设置主轴方向，默认是row */
flex-direction: row;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
text-align: center;
line-height: 100px;
}
/* 给最后一个子元素设置更小的order值 */
.item-last {
order: -1;
}
上述代码中，其他子元素的order默认是0，最后一个子元素的order设置为-1，因此会排列在所有元素的最前面。
其他可选方案
调整flex-direction方向
如果容器的子元素顺序本身符合需求，只是最后一个是需要首位的，我们可以通过设置flex-direction: row-reverse反转主轴方向，再配合justify-content调整对齐方式，不过这种方式会改变所有元素的顺序，适合整体反转的场景。
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
两种方案对比
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| order属性调整 | 仅需要调整单个或少数元素顺序 | 不影响其他元素原有顺序，灵活度高 | 需要单独给目标元素设置样式 |
| flex-direction反转 | 需要整体反转所有元素顺序 | 无需单独设置子元素样式 | 会改变所有元素的排列顺序 |
注意事项
- order属性只影响视觉上的排列顺序，不会改变DOM结构的实际顺序，因此不会影响键盘导航、屏幕阅读器等无障碍访问的体验。
- 如果多个元素设置了相同的order值，它们会按照DOM中的原有顺序排列。
- order属性可以取任意整数值，不限于正负整数，根据实际需求设置即可。
实际开发中建议优先使用order属性实现单个元素的位置调整，这种方式更灵活，也不会影响其他元素的正常排列逻辑。如果需要调整的是动态生成的列表，也可以通过JS动态修改最后一个子元素的order值，实现动态排序效果。
Flex布局order属性flex-directionjustify-content修改时间：2026-07-22 15:51:22