通过 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;
}<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
✅ 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 方案。它简洁、声明式、无副作用，是现代前端布局中值得熟练掌握的基础技巧。
