order

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

概述

CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

备注： order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speech。

初始值	`0`
适用元素	Flex items, grid items, and absolutely-positioned flex and grid container children
是否是继承属性	否
计算值	as specified
动画类型	an integer

参考使用 CSS 弹性盒子获取更多信息。

语法

css

/* Numerical value including negative numbers */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: unset;

取值

<integer>: 表示此可伸缩项目所在的次序组。

Formal syntax

order = 
  <integer>

例子

这里是一个基本的 HTML 代码片段：

html

<!doctype html>
<header>…</header>
<div id="main">
  <article>…</article>
  <nav>…</nav>
  <aside>…</aside>
</div>
<footer>…</footer>

下面的 CSS 代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。Flexible Box 布局模块会自动地创建三个具有相同高度的内容块，也会使用所有可用的水平空间。

css

#main {
  display: flex;
}
#main > article {
  flex: 1;
  order: 2;
}
#main > nav {
  width: 200px;
  order: 1;
}
#main > aside {
  width: 200px;
  order: 3;
}

规范

Specification
CSS Display Module Level 3 # order-property

浏览器兼容性

BCD tables only load in the browser

参考

使用 CSS 弹性盒子