1. Web
  2. CSS
  3. order

order

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

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

试一试

order: 0;

order: 3;

order: -1;

order: 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Box 1:</div>
  <div style="order: 1">Box 2: <code>order: 1;</code></div>
  <div style="order: 2">Box 3: <code>order: 2;</code></div>
  <div style="order: 2">Box 4: <code>order: 2;</code></div>
  <div style="order: 3">Box 5: <code>order: 3;</code></div>
</section>

.default-example {
  max-height: 300px;
  display: flex;
  flex-flow: column;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 0.5rem;
  padding: 0.5rem;
  flex: 1;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

#example-element::after {
  content: attr(style);
  outline: 2px dashed;
  font-family: monospace;
}

在上面的演示中，选择左侧的选项以更改粉色框的 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 键顺序，因此它不得用于非视觉媒体，例如语音。

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

值

<integer>

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

无障碍

使用 order 属性将导致内容视觉呈现与 DOM 顺序之间出现断开。这将对借助屏幕阅读器等辅助技术进行导航的弱视用户产生不利影响。如果视觉顺序与 DOM 顺序不同，您的用户将根据他们访问内容的方式获得不同的体验。

正式定义

初始值0
应用于弹性项目、网格项目以及绝对定位的弹性盒和网格容器子项
继承性否
计算值同指定值
动画类型一个整数

正式语法

order = 
  <integer>

示例

在弹性容器中对项目进行排序

在此示例中，我们创建了一个经典的双侧边栏布局。

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> 元素成为一个弹性容器。默认情况下，这会创建垂直尺寸相等的弹性项目。两个侧边栏都给定了一个绝对width，而<article>将通过 flex 简写设置的 flex-grow 因子，消耗所有正自由空间。

然后，我们为弹性容器的三个子元素中的每一个设置不同的 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 Display Module Level 3
# order 属性

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.