Flexbox中order属性可控制子元素显示顺序，值越小越靠前，结合flex-direction影响布局方向，适用于响应式设计且无需修改HTML结构。

在使用 Flexbox 布局时，子元素的显示顺序可以通过 order 属性灵活控制，而不必依赖 HTML 结构的先后顺序。这对于响应式设计或动态调整布局非常有用。

理解 order 属性的基本作用

默认情况下，Flex 容器中的子元素按照它们在 HTML 中出现的顺序排列，每个子元素的 order 值为 0。通过设置不同的 order 值，可以改变它们在容器中的视觉顺序。

如何使用 order 控制子元素顺序

给 Flex 子元素设置 order 即可重新定义其显示位置。下面是一个简单示例：

.item-1 { order: 3; }

尽管 HTML 中 .item-1 排在前面，但在页面上它会显示在最后，因为它的 order 值最大。

结合 flex-direction 实现更复杂排序

order 属性的排序效果还会受到 flex-direction 的影响：

实际应用场景建议

order 特别适合在移动端调整内容顺序，比如将导航移到内容下方，而无需修改 HTML 结构。

基本上就这些。order 属性是 Flexbox 中一个简单却强大的工具，掌握它能让你更自由地组织页面布局。