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 数值，可以控制它们在容器中的 排列 顺序。
数值越小，越靠前；数值相同则按文档流顺序排列。
示例：
立即学习 “ 前端免费学习笔记（深入）”；
即使 HTML 中 item1 排第一，最终显示顺序是：item2（order 1）、item1（order 2）、item3（order 3）。
响应式布局 中的实际应用
在移动设备上，我们常常希望把导航或广告栏放在主要内容之后。这时可以用 order 实现视觉顺序调整。
例如网页结构：
<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 属性简单却强大，掌握它能让你更灵活地控制页面布局，特别是在不同屏幕尺寸下调整内容优先级时非常实用。
