Flexbox中order属性可控制子元素显示顺序，值越小越靠前，结合flex-direction影响布局方向，适用于响应式设计且无需修改HTML结构。
在使用 Flexbox 布局时，子元素的显示顺序可以通过 order 属性灵活控制，而不必依赖 HTML 结构的先后顺序。这对于响应式设计或动态调整布局非常有用。
理解 order 属性的基本作用
默认
情况下，Flex 容器中的子元素按照它们在 HTML 中出现的顺序排列，每个子元素的 order 值为 0。通过设置不同的 order 值，可以改变它们在容器中的视觉顺序。
• 如果多个元素具有相同的 order 值，则按文档流顺序排列。
• order 接受整数（包括负数），例如 -1、0、1、2 等。
如何使用 order 控制子元素顺序
给 Flex 子元素设置 order 即可重新定义其显示位置。下面是一个简单示例：
.container {display: flex;
}
.item-1 { order: 3; }
.item-2 { order: 1; }
.item-3 { order: 2; }
尽管 HTML 中 .item-1 排在前面，但在页面上它会显示在最后，因为它的 order 值最大。
结合 flex-direction 实现更复杂排序
order 属性的排序效果还会受到 flex-direction 的影响：
• 当 flex-direction 为 row 或 column 时，order 按主轴方向排序。• 若设为 row-reverse 或 column-reverse，元素整体反向排列，但相同 order 组内仍保持文档顺序。
• 注意：reverse 类型不会改变 order 的优先级逻辑，只是反转最终布局方向。
实际应用场景建议
order 特别适合在移动端调整内容顺序，比如将导航移到内容下方，而无需修改 HTML 结构。
• 在响应式设计中，用 CSS 的 order 替代 DOM 操作更高效。• 避免过度使用负数或极大数值，保持代码可读性。
• 考虑屏幕阅读器等辅助技术，HTML 结构仍应保持语义合理。
基本上就这些。order 属性是 Flexbox 中一个简单却强大的工具，掌握它能让你更自由地组织页面布局。
