order
CSS
property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending
order
value and then by their source code order.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* <integer> values */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: unset;
Since
order
is only meant to affect the
visual order
of elements and not their logical or tab order.
order
must not be used on non-visual media such as
speech
.
<integer>
Represents the ordinal group to be used by the item.
使用
order
property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.
| 初始值 |
0
|
|---|---|
| 适用于 | flex items and absolutely-positioned flex container children |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | an integer |
<integer>
This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available.
<header>...</header> <main> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside> </main> <footer>...</footer>
main { display: flex; text-align:center; }
main > article { flex:1; order: 2; }
main > nav { width: 200px; order: 1; }
main > aside { width: 200px; order: 3; }
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Flexible Box Layout Module
The definition of 'order' in that specification. |
候选推荐 | 初始定义 |
| 初始值 |
0
|
|---|---|
| 适用于 | flex items and absolutely-positioned flex container children |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | an integer |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
order
|
Chrome 完整支持 29 | Edge 完整支持 12 |
Firefox
完整支持
20
注意事项
|
IE
完整支持
11
|
Opera 完整支持 12.1 | Safari 完整支持 9 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 29 |
Firefox Android
完整支持
20
注意事项
|
Opera Android 完整支持 12.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 2.0 |
完整支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。