CSS flex 布局(入门)- order 顺序

order 属性设置在项目上,定义项目的排列顺序。数值越小,排列越靠前,默认为0。

<style type="text/css">
div{
	display: flex;
}
.sp{ order:2; }
</style>

<div>
	<span>1</span>
	<span class="sp">2</span>
	<span>3</span>
</div>

以上实例,水平主轴为排列方向,则结果为 132。

兼容性 :

属性 IE Chrome Firefox Safari Opera
order 11.0 21.0 -webkit-
29.0
18.0 -moz-
28.0
6.1 -webkit-
9.0
17.0

JavaScript 语法:

object.style.order="2";