在列表类交互场景中，把状态为active的列表项置顶显示是很常见的需求，比如待办列表里标记重要的任务排到最前，或者用户选中的选项优先展示。使用CSS Flexbox的order属性，不需要调整DOM节点的位置，仅通过样式就能实现这个效果，逻辑更简洁，也不影响原有DOM结构。
实现原理
Flexbox布局中，每个子项都有一个order属性，默认值为0。order值越小的子项，排列位置越靠前。我们只需要给active状态的列表项设置一个比默认order值更小的数值，就能让它排到列表最顶部，其余非active项保持默认order值，就会按原有顺序排列在active项下方。
完整实现步骤
1. HTML结构搭建
首先创建一个基础的列表容器，内部包含多个列表项，其中部分项添加active类表示激活状态：
<div class="list-container"> <div class="list-item">列表项1</div> <div class="list-item active">列表项2（active）</div> <div class="list-item">列表项3</div> <div class="list-item active">列表项4（active）</div> <div class="list-item">列表项5</div> </div>
2. CSS样式编写
给容器设置display: flex开启Flexbox布局，然后设置非active项的order为0，active项的order为-1，这样active项就会排到最前面：
/* 列表容器开启flex布局 */
.list-container {
display: flex;
flex-direction: column; /* 垂直排列子项 */
gap: 12px; /* 子项之间的间距 */
padding: 16px;
background-color: #f5f5f5;
border-radius: 8px;
width: 300px;
}
/* 普通列表项样式 */
.list-item {
padding: 12px 16px;
background-color: #ffffff;
border-radius: 6px;
border: 1px solid #e8e8e8;
order: 0; /* 默认order值 */
}
/* active状态的列表项样式 */
.list-item.active {
order: -1; /* 比默认值小，排到最前面 */
background-color: #e6f7ff;
border-color: #91d5ff;
font-weight: 500;
}
3. 动态切换active状态
如果需要点击列表项切换active状态，可以配合少量JavaScript修改类名，样式会自动生效：
// 获取所有列表项
const listItems = document.querySelectorAll('.list-item');
// 给每个列表项绑定点击事件
listItems.forEach(item => {
item.addEventListener('click', function() {
// 切换active类
this.classList.toggle('active');
});
});
效果说明
上述代码运行后，所有带active类的列表项会排到列表最顶部，按照HTML中出现的顺序排列，其余非active项按原有顺序排列在active项下方。点击列表项切换active状态时，布局会自动重新排序，不需要手动调整DOM节点位置。
注意事项
- order属性只影响视觉排列顺序，不会改变DOM树中的实际结构，如果需要依赖DOM顺序做其他逻辑，需要注意这个差异。
- 如果有多个不同优先级的置顶需求，可以设置不同的order值，比如重要项order为-2，普通active项order为-1，非active项order为0，就能实现多级排序。
- Flexbox的order属性兼容性较好，主流现代浏览器都支持，不需要添加浏览器前缀。
适用场景
这种方案适合纯视觉层面的排序需求，比如列表展示时的临时置顶、筛选后的状态标记排序等。如果后续需要持久化排序结果，还是需要结合后端接口或者本地存储记录状态，前端仅负责渲染即可。
CSS_Flexboxactive列表项置顶排序order属性修改时间：2026-06-13 02:30:32