order 属性与视觉重排
使用 order 属性改变弹性项目的视觉顺序，同时不改变 DOM。
order 属性与视觉重排 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
order 属性
order 属性可以更改弹性项目和网格项目的视觉顺序，而不改变 DOM 结构。默认值为 0；值越大的项目越靠后；负值会让项目排在更前面。
order 基础
项目会按照 order 值从小到大显示。order 值相同的项目会按照 DOM 顺序显示。
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
负 order 值
使用负值可以让项目排在所有默认（order:0）项目之前：
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
响应式重新排序
可以在不同断点更改视觉顺序，而不改变 HTML：
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
重要：无障碍警告
order 只会更改视觉顺序。屏幕阅读器和键盘导航遵循DOM 顺序，而不是视觉顺序。保持 DOM 的逻辑阅读顺序，同时在视觉上重新排序，对于无障碍访问至关重要。
Tab 顺序不一致
如果使用 order 重新排列项目，键盘 Tab 焦点会遵循 DOM 顺序，这可能与视觉顺序不同。这会为键盘用户造成令人困惑的导航体验。只有在不会破坏逻辑顺序时，才应使用视觉重新排序。
常见的合理使用场景
在以下情况下，视觉重新排序是可以接受的：
- 这些项目不属于可导航的序列（仅用于装饰性排序）
- 由于代码组织原因，源代码顺序与自然阅读顺序不同，但视觉顺序符合自然阅读流程
弹性盒布局中的 order 与网格布局中的 order
order 属性在弹性盒布局和 CSS 网格布局中的工作方式相同。它控制布局算法中的顺序，而不是 DOM 顺序。
order 与 Flex-wrap
当项目换到新行时，order 决定哪些项目显示在哪一行，以及每一行中的排列顺序。
反转所有项目
要反转所有项目，请使用 flex-direction: row-reverse 或 column-reverse，而不要为每个项目设置负的 order 值。这样语义更清晰，也更简单。
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
使用 order 设置动画
CSS 中无法为 order 的更改添加动画。如果需要对重新排序进行动画处理，请使用变换，或使用 Flip.js、GSAP 的 Flip 插件等由 JavaScript 驱动的动画。
快速检查
为什么应谨慎使用 order 属性重新排列导航链接？
回顾
order 会改变弹性项目或网格项目的视觉位置，而不会修改 HTML。默认值为 0；值越小越靠前，值越大越靠后。请使用它在不改变 DOM 结构的情况下进行响应式重新排序。使用 order 重新排序时，请始终确认键盘导航顺序和屏幕阅读器读取顺序仍然符合逻辑。
常见问题解答
「order 属性与视觉重排」课时是免费的吗？
是的 — 「order 属性与视觉重排」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「order 属性与视觉重排」这节课中我会学到什么？
使用 order 属性改变弹性项目的视觉顺序，同时不改变 DOM。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「order 属性与视觉重排」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。