本文介绍一种无需 javascript、纯 css 实现的方案：利用 flexbox 的 `order` 属性，将所有带 `active` 类的 `
在现代前端开发中，动态调整 DOM 元素视觉顺序（而非实际 HTML 结构顺序）是一个常见需求。例如，在轮播图导航、标签页或筛选结果列表中，需优先展示“激活态”项，但又不希望频繁操作 DOM 或引入 JS 逻辑。此时，CSS Flexbox 提供了简洁高效的解决方案——order 属性。
核心原理
Flex 容器中的子元素默认 order: 0；数值越小，视觉位置越靠前。我们只需将 .slide.active 设为 order: 0，其余 .slide 统一设为 order: 1（或更高），即可实现“active 项前置”的效果，且完全保持 HTML 源码结构不变。
实现代码
.sliderscroll {
display: flex;
flex-direction: column;
}
.slide {
order: 1; /* 默认置于后面 */
}
.slide.active {
color: red;
order: 0; /* 置顶显示 */
}✅ 注意：order 仅影响视觉渲染顺序，不影响语义结构、键盘焦点流（Tab 顺序）或屏幕阅读器读取顺序。如需兼顾可访问性，建议配合 tabindex 或 ARIA 属性优化（例如对 active 项添加 aria-current="true"）。
完整示例
<ul class="sliderscroll"> <li class="slide">List A</li> <li class="slide">List B</li> <li class="slide">List C</li> <li class="slide active">List D</li> <li class="slide">List E</li> <li class="slide active">List F</li> </ul>
渲染结果为：List D → List F → List A → List B → List C → List E，完美符合预期。
兼容性说明
该方案支持所有主流浏览器（Chrome 29+、Firefox 20+、Safari 9+、Edge 12+）。若需兼容 IE10/11，可使用 -ms-flex-order 前缀，但 IE 不支持 order 在 column 方向的稳定表现，建议降级为 JS 排序方案。
立即学习“前端免费学习笔记（深入）”；
总结
- ✅ 纯 CSS、零 JS、无重排开销
- ✅ 语义清晰、维护成本低
- ⚠️ 注意可访问性与 SEO 场景下的行为一致性
- ? 如需响应式切换（如移动端恢复原始顺序），可通过媒体查询动态修改 order 值
灵活运用 order，让视觉排序更可控、更优雅。
