order 排列顺序属性

最后更新：2026-09-13

order order 排列顺序属性

order 属性用于设置弹性项目在容器内的显示顺序，默认值为 0。数值越小的项目越靠前显示，数值相同时按 DOM 顺序排列。该属性仅改变视觉呈现顺序，不会改变 DOM 结构，因此会影响屏幕阅读器的阅读顺序和 Tab 键焦点顺序，使用时需谨慎。

分类
初始值	0
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

order: <integer>;

⚙️ 取值

值	类型	描述
`<integer>`	类型	弹性项目排列顺序

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
order	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： order 接受整数值，包括负数。默认所有项目的 order 为 0，设置为负数可让项目排在最前，设置为正数可让项目排在最后。

注意： order 会改变屏幕阅读器和键盘焦点的顺序，可能与 DOM 顺序不一致，影响可访问性。仅在纯视觉调整时使用，避免用于改变有逻辑意义的内容顺序。

❓ 常见问题

Qorder 会改变 DOM 顺序吗？

A不会。order 只改变视觉呈现顺序，DOM 结构保持不变，因此 JavaScript 遍历节点、屏幕阅读器的朗读顺序和 Tab 键焦点顺序仍按原始 DOM 顺序进行。若项目是链接或表单控件，视觉顺序与焦点顺序不一致会造成困惑，使用前需评估可访问性影响。

Qorder 在响应式布局中有什么用途？

A配合媒体查询可以在不修改 HTML 的情况下调整显示顺序：例如移动端把主要内容提前、侧边栏置后，桌面端恢复原序。写法如 @media (max-width: 768px) { .sidebar { order: 1 } }。适合内容顺序随设备变化的场景，但不宜过度依赖，复杂排序会降低代码可读性。

Qorder 相同的项目按什么顺序排列？

A先按 order 值从小到大排列，order 值相同时按 DOM 中的书写顺序排列。默认 order 为 0，负值排在常规项目之前，所以 order: -1 能排到最前、order: 1 排到最后。实际使用中尽量只对个别项目用 order 做微调，避免大量项目依赖 order 排序导致结构难以理解。