order属性用于控制flex子项的显示顺序，默认值为0，数值越小越靠前，可实现不修改HTML结构的视觉重排，适用于响应式设计与无障碍优化。
在使用 Flex 布局时，如果需要调整子元素的显示顺序，可以直接使用 CSS 的 order 属性，而无需改动 HTML 结构。这个属性专门用于控制 flex 子项在容器中的排列顺序。
什么是 order 属性？
order 属性定义了 flex 子元素在主轴上的排序级别。默认情况下，所有子元素的 order 值为 0，元素按照它们在 HTML 中出现的顺序排列。通过设置不同的数值，可以改变它们的显示次序。
数值越小，元素越靠前；数值相同则按 HTML 顺序排列。
如何使用 order 属性？
确保父容器是 flex 布局，然后为子元素设置 order 值：
立即学习“前端免费学习笔记（深入）”；
- 给父元素设置 display: flex;
- 为子元素添加 order 数值（可以是负数、0 或正数）
.container {
display: flex;
}
.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }
尽管 item1 在 HTML 中排第一，但最终显示顺序会是：item2 → item3 → item1。
实际应用场景
这个特性特别适合在响应式设计中调整布局结构。比如在移动端，希望将页脚内容显示在主体内容之前，就可以通过修改 order 实现，而不必操作 DOM。
- 移动优先设计中调整模块顺序
- 无障碍访问优化：保持语义化 HTML 顺序的同时调整视觉顺序
- 卡片式布局中动态切换展示优先级
注意事项
order 只影响视觉顺序，不影响 DOM 结构和键盘导航顺序。因此要确保可访问性不受影响。
- 避免过度依赖 order 来重构页面逻辑
- 屏幕阅读器仍按 HTML 顺序读取内容
- 建议配合 tabindex 等属性优化交互体验
基本上就这些。用好 order 能让你更灵活地控制布局，尤其在不修改 HTML 的前提下实现视觉重排，非常实用。
