order
版本:CSS3
CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
示例
/* Numerical value including negative numbers */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: unset;
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
IE11以上版本的浏览器都支持order |
语法
order:><integer>
取值
- <integer>:表示此可伸缩项目所在的次序组。参见
<integer>
默认值 | 0 |
适用于 | 多行的弹性盒模型容器 |
继承性 | 无 |
动画性 | visual |
计算值 | 指定值 |
例子
下面的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; } //HTML <!DOCTYPE html> <header>…</header> <div id='main'> <article>…</article> <nav>…</nav> <aside>…</aside> </div> <footer>…</footer>