order属性用于调整Flexbox子元素的显示顺序，整数值越小越靠前，默认为0。需父容器设为flex才生效，不改变DOM结构，适用于响应式布局调整。
在CSS中，order属性用于控制弹性盒子（Flexbox）容器中子元素的排列顺序。默认情况下，弹性子元素按照它们在HTML中出现的顺序进行排列，但通过order属性可以灵活地改变这一顺序。
基本语法
order:
其中，0。数值越小，元素越靠前排列；数值相同时，按文档流顺序排列。
使用场景与示例
假设你有一个弹性容器，包含三个子元素，你想让第二个元素显示在最后：
YIXUNCMS中秋专版2.0.4
下载
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
}
.item1 { order: 1; }
.item2 { order: 3; }
.item3 { order: 2; }
此时，页面上显示的顺序将是：item1 → item3 → item2。
注意事项
-
仅对弹性子元素有效：只有当父容器设置了
display: flex或display: inline-flex时，order才会起作用。 - 不影响语义结构：虽然视觉顺序改变了，但DOM结构和屏幕阅读器读取的顺序不变，因此要考虑可访问性问题。
-
不要依赖 order 来修复结构问题：建议HTML结构本身保持合理的语义顺序，
order应用于布局微调而非重构内容逻辑。
order能让布局更灵活，尤其在响应式设计中调整元素显示顺序时非常实用。 
