order属性可改变flex子元素显示顺序而不影响html结构，例如设置.item1{order:2}、.item2{order:1}时显示为item2、item1、item3；在响应式设计中，通过媒体查询调整order值可使移动端内容优先展示，如将.content的order设为0、.sidebar设为1、.header设为2，实现侧边栏下移；需注意order仅改变视觉顺序，不影响dom与屏幕阅读器顺序，应避免滥用以保障可访问性，且宜配合flex-direction考虑主轴方向，其在grid布局中也有效但性能略低。

在css的flex布局中，order属性可以改变子元素的显示顺序，而不影响HTML结构。这个特性非常适合在响应式设计中调整内容展示顺序，比如在移动端把侧边栏移到内容下方。

order属性的基本用法

默认情况下，Flex容器中的子元素按HTML顺序排列，每个子元素的order值为0。通过给子元素设置不同的order数值，可以控制它们在容器中的排列顺序。

数值越小，越靠前；数值相同则按文档流顺序排列。

示例：

立即学习“前端免费学习笔记（深入）”；

 .container {   display: flex; } .item1 { order: 2; } .item2 { order: 1; } .item3 { order: 3; } 

即使HTML中item1排第一，最终显示顺序是：item2（order 1）、item1（order 2）、item3（order 3）。

响应式布局中的实际应用

在移动设备上，我们常常希望把导航或广告栏放在主要内容之后。这时可以用order实现视觉顺序调整。

例如网页结构：

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

 <header class="header">头部</header> <main class="content">内容区</main> <aside class="sidebar">侧边栏</aside> 

CSS设置：

 .container {   display: flex;   flex-direction: column; } .content { order: 1; } .sidebar { order: 2; } .header  { order: 0; } 

在桌面端正常显示。到了移动端，可以通过媒体查询把侧边栏“下移”：

 @media (max-width: 768px) {   .content  { order: 0; }   .sidebar  { order: 1; }   .header   { order: 2; } } 

这样内容优先展示，提升移动端阅读体验。

使用注意事项

order只是改变视觉顺序，不会影响DOM结构和屏幕阅读器读取顺序。这对可访问性有影响，需谨慎使用。

• 不要用order来修复HTML结构不合理的问题
• 避免设置过大的order值，保持简洁清晰
• 与flex-direction配合时注意主轴方向的影响
• 在网格布局（Grid）中order同样有效，但性能开销略高

基本上就这些。order属性简单却强大，掌握它能让你更灵活地控制页面布局，特别是在不同屏幕尺寸下调整内容优先级时非常实用。