顺序

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本中使用。它自以下时间以来在浏览器中可用 2015年9月.

order CSS 属性设置在弹性或网格容器中布局项目的顺序。容器中的项目按升序的 order 值排序，然后按其源代码顺序排序。未指定显式 order 值的项目将分配默认值 0。

试试看

在上面的演示中，选择左侧的选项以更改粉色框的 order 属性的值。浅蓝色框已分配固定 order 值。

请记住源代码顺序的影响。例如，当选择 order: 2; 时，粉色框将放置在两个具有 order: 2; 的蓝色框之前。这是因为粉色框在源代码中出现在蓝色框之前。

语法

css
/* <integer> values */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;

由于 order 仅用于影响元素的视觉顺序，而不是其逻辑或 Tab 顺序。order 不得用于非视觉媒体，例如 语音。

此属性在 CSS 显示 模块中定义，仅影响网格和弹性项目。当在父元素的 display 属性未创建弹性或网格容器的元素上设置 order 时，order 属性无效。

值

<integer>

表示项目要使用的序数组。

无障碍访问

使用 order 属性将在内容的视觉呈现和 DOM 顺序之间产生脱节。这将对使用屏幕阅读器等辅助技术的低视力用户产生不利影响。如果视觉顺序与 DOM 顺序不同，则您的用户将根据他们访问内容的方式获得不同的体验。

正式定义

初始值0
应用于Flex 项目、Grid 项目以及绝对定位的 Flex 和 Grid 容器子元素
继承否
计算值如指定
动画类型一个 整数

正式语法

order = 
  <integer>

示例

在 Flex 容器中排序项目

在这个例子中，我们创建了一个经典的两侧边栏布局。

HTML

我们包含了一个头部、一个脚注和一个主要内容区域。主要内容包括一篇文章和两个侧边栏。注意它们的顺序！我们将使用 CSS 的 order 属性来改变它们的视觉顺序。

html
<header>Header</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>Footer</footer>

CSS

我们使用 弹性盒子布局 模块的功能来设置主要区域的样式；通过将 display 设置为 flex，<main> 元素成为一个 Flex 容器。默认情况下，这会创建垂直大小相等的 Flex 项目。侧边栏都设置了绝对的 width，而 <article> 将使用 正向空闲空间，并通过 flex 简写设置 flex-grow 因子。

然后，我们为 Flex 容器的三个子元素中的每一个设置不同的 order 属性值；这意味着 CSS 定义了该组件的视觉顺序，而不是它在 HTML 中声明的顺序。

css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}

结果

<article> 在源代码顺序中首先出现，但在视觉上呈现于中间。

规范

规范
CSS 显示模块级别 3
# order 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅