order属性用于控制Flex子元素在主轴上的显示顺序，值越小越靠前，默认为0。通过设置正负整数可改变视觉排列，如.item2{order:1}、.item3{order:2}、.item1{order:3}时，实际顺序为.item2→.item3→.item1。order仅影响视觉顺序，不改变DOM结构，需注意可访问性。结合flex-direction可控制整体流向，如row、column等方向变化时，order仍按数值从小到大排序。常用于响应式设计中调整内容顺序，如移动端菜单置顶或页脚前置，但应避免滥用以保持HTML语义化，利于SEO与无障碍访问。
在使用 Flexbox 布局时，可以通过 order 属性来改变子元素的排列顺序，而不必修改 HTML 结构。默认情况下，Flex 容器中的子元素会按照它们在 HTML 中出现的顺序进行排列，但通过设置 order 属性，可以灵活控制每个子项的位置。
什么是 order 属性？
order 属性用于定义 Flex 子元素在主轴上的显示顺序。它的值是一个整数（正数、负数或零），默认值为 0。数值越小，元素越靠前；数值相同时，按 HTML 顺序排列。
注意： order 只影响视觉顺序，不会影响 DOM 结构或屏幕阅读器读取的顺序，因此要注意可访问性问题。
如何使用 order 改变排列顺序？
给 Flex 子元素设置 order 数值即可调整其位置。例如：
.container {
display: flex;
}
.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }尽管 .item1 在 HTML 中排第一，但最终布局中它会显示在最后，因为它的 order 值最大。实际顺序是：.item2 → .item3 → .item1。
结合 flex-direction 控制流向
order 始终沿着主轴方向生效。你可以配合 flex-direction 来进一步控制整体流向：
-
flex-direction: row：从左到右排列（默认） -
flex-direction: row-reverse：从右到左，此时 order 小的元素会出现在右侧 -
flex-direction: column：从上到下排列 -
flex-direction: column-reverse：从下到上排列
即使改变了主轴方向，order 依然以数值从小到大排序，只是排列方向变了。
实用技巧与建议
使用 order 可以实现一些常见的响应式布局需求，比如在移动端调整内容顺序：
- 将“移动菜单”按钮在小屏幕上通过
order: -1提到最前面 - 让页脚信息在手机上显示在内容之前
- 在卡片布局中，调整标题、图片、按钮的视觉顺序以适应不同设备
提示： 避免过度依赖 order 来重构页面结构。语义正确的 HTML 更有利于 SEO 和无障碍访问。
基本上就这些。order 是一个简单但强大的工具，配合 Flexbox 能让你更自由地控制布局顺序，尤其适合响应式设计场景。不复杂但容易忽略细节。
