order属性用于调整flex子元素的视觉排列顺序，默认值为0，数值越小越靠前。通过设置不同整数值可改变项目显示顺序，如item2（-1）、item3（1）、item1（2）将按此序显示。适用于响应式设计中无需改动HTML结构的内容重排，但不影响DOM顺序、键盘导航及屏幕阅读器顺序，相同order值则按DOM顺序排列，建议合理使用以保障可访问性与维护性。
Flexbox 中的 order 属性用于控制弹性容器中子元素的排列顺序，而不影响 HTML 结构。默认情况下，所有子元素的 order 值为 0，它们按照在 DOM 中出现的顺序排列。通过设置不同的 order 值，可以灵活地调整项目的位置。
order 属性的基本语法
每个弹性项目（flex item）都可以设置 order 属性：
order:其中
实际使用示例
假设有一个弹性容器和三个子元素：
立即学习“前端免费学习笔记（深入）”；
飞飞网游装备点卡交易 Build 0920
下载
一个可以提供给用户做为网络游戏物品装备交易的平台，可以由用户向网站发出物品交易委托申请，由网站做为中间人保证交易顺利完成，同时又可以做为游戏周边产品及其他商品销售的网上商城，该系统把2大功能紧密结合在一起，让使用该程序的用户能更方便快捷安全的管理一个属于自己的网站用户名：admin密码：8741137
1
2
3
CSS 样式如下：
css"> .container {display: flex;
justify-content: space-between;
}
.item1 { order: 2; }
.item2 { order: -1; }
.item3 { order: 1; }
尽管 HTML 中项目按 1、2、3 排列，但最终显示顺序会是：
- item2（order: -1）— 最小值，最靠前
- item3（order: 1）
- item1（order: 2）
应用场景与注意事项
order 属性特别适合在响应式设计中调整内容展示顺序。例如，在移动端希望将“侧边栏”内容显示在主内容之前或之后，而无需修改 HTML 结构。
- 多个项目拥有相同 order 值时，它们按 DOM 顺序排列
- order 不改变语义结构，对屏幕阅读器等辅助工具无效，建议保持 HTML 逻辑合理
- 避免过度依赖 order 调整布局，以免影响可维护性和可访问性
基本上就这些，order 提供了视觉顺序的灵活性，但要谨慎使用以保证结构清晰。不复杂但容易忽略的是：它只影响渲染顺序，不影响键盘焦点或读屏顺序。
