如何使用 CSS Flexbox 实现 active 列表项置顶排序

通过 css flexbox 的 `order` 属性，可无需修改 html 结构，仅用样式将带 `.active` 类的列表项自动排至最前，其余项按原序跟随，实现动态视觉优先级。

在构建导航菜单、轮播控制点或标签式内容切换组件时，常需突出当前激活项（如 .slide.active），但又不希望破坏原始 dom 顺序（例如为语义化、无障碍访问或 js 逻辑一致性考虑）。此时，借助现代 css 布局能力——Flexbox 的 order 属性，即可优雅实现“视觉上置顶，结构上不动”的效果。

✅ 核心原理

Flex 容器中的子元素默认 order: 0；数值越小，排列越靠前。我们只需：

• 将
  设为 display: flex; flex-direction: column;
• 为所有
• 设置统一基础 order: 1（使其默认居后）
• 为 .slide.active 单独设置 order: 0（强制前置）

? 完整实现代码

.sliderscroll {   display: flex;   flex-direction: column;   list-style: none;   padding: 0; }  .sliderscroll li.slide {   order: 1; /* 所有非 active 项统一置于后段 */   margin: 4px 0; }  .sliderscroll li.slide.active {   color: red;   order: 0; /* active 项视觉置顶 */   font-weight: bold; }

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

✅ 渲染结果顺序（视觉）：List D → List F → List A → List B → List C → List E
✅ DOM 顺序保持不变：仍为 A→B→C→D→E→F，保障可访问性（如屏幕阅读器读取顺序）与 javaScript 操作可靠性。

⚠️ 注意事项

• 浏览器兼容性：Flexbox 支持良好（chrome 29+、firefox 28+、safari 9+、edge 12+），旧版 IE（≤10）不支持，如需兼容需降级方案（如 JS 重排 DOM）。
• 语义保留：该方法纯属视觉重排，不影响
  的语义结构和 seo，推荐优先使用。
• 避免滥用 order：若列表项数量动态变化或含复杂嵌套，建议配合 :is() 或 CSS 自定义属性提升可维护性。

总结：order 是解决“逻辑顺序 vs 视觉优先级”冲突的轻量级 CSS 方案。它简洁、声明式、无副作用，是现代前端布局中值得熟练掌握的基础技巧。