如何使用 CSS Flexbox 将带有 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"）。

完整示例

  
List A
  
List B
  
List C
  
List D
  
List E
  
List F

渲染结果为：List D → List F → List A → List B → List C → List E，完美符合预期。

兼容性说明

该方案支持所有主流浏览器（Chrome 29+、Fir

总结

• ✅ 纯 CSS、零 JS、无重排开销
• ✅ 语义清晰、维护成本低
• ⚠️ 注意可访问性与 SEO 场景下的行为一致性
• ? 如需响应式切换（如移动端恢复原始顺序），可通过媒体查询动态修改 order 值

灵活运用 order，让视觉排序更可控、更优雅。