顺序 | order

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

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

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

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

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

语法

取值

<integer>表示弹性项目已分配的序号组。

形式语法

<integer>

实例

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

<header>...</header>
<div id='main'>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</div>
<footer>...</footer>

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

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

结果

规范

浏览器兼容性