order属性可调整Flex子元素视觉顺序而不改变DOM结构，其默认值为0，数值越小越靠前，仅作用于直接子元素，需注意可访问性与响应式配合使用。
Flex 布局中，子元素的视觉顺序不一定要和 HTML 中的源顺序一致，用 order 属性就能轻松调整显示次序。它不影响 DOM 结构，只改变渲染时的排列位置，特别适合响应式布局或无障碍友好的内容重排。
理解 order 属性的基本规则
order 默认值是 0，所有子项按 HTML 顺序排列。数值越小，越靠前；数值相同时，按原始 HTML 顺序显示。它只对 flex 容器的直接子元素生效。
- 支持正数、负数和 0，比如
order: -1会把它提到最前面 - 不要依赖过大的数值（如 999），保持逻辑清晰更利于维护
- 注意：设置
order不会改变键盘 Tab 顺序或屏幕阅读器读取顺序，如需语义一致，建议配合aria-order或结构优化
在响应式中动态调整顺序
结合媒体查询，可以针对不同屏幕尺寸重新组织内容流。例如，移动端把侧边栏移到主内容下方，桌面端恢复左右并列：
- 给主内容设
order: 1，侧边栏设order: 2 - 在小屏下，把侧边栏改为
order: 3，主内容保持order: 1，就自然下移了 - 无需 JS，纯 CSS 即可完成，性能好且语义保留
避免 order 使用的常见误区
order 是视觉重排，不是结构重排，容易引发可访问性或 SEO 风险。
立即学习“前端免费学习笔记（深入）”；
- 别用
order把标题放到正文后面——这会让屏幕阅读器先读正文，再读标题 - 不要为“隐藏”元素设极大或极小的
order值来替代display: none，它仍占用布局空间 - 多个同级元素使用
order时，建议用连续整数（如 1/2/3）而非跳跃值（如 1/5/10），便于后续插入新项
基本上就这些。order 不复杂但容易忽略细节，用对了能大幅提升布局灵活性。
