前景:你有没有在布局子元素的时候,想pc和wap不一样,有的子元素需要向前排序,用float有时候不方便,中间还夹杂着其它子元素,定位也会麻烦,需要写一堆兼容css,那么你可以试试order这个属性

1.属性定义

order: 设置或检索弹性盒模型对象的子元素出现的順序,就是给子元素排序,前提是父级盒子为弹性布局flex或网格布局grid,官方还提到绝对定位中也可以用。网格和弹性盒子中,我测试成功,但是绝对定位没试过。

2.参数可用值

order: number|initial|inherit; 

  •  number:数字为任意整数值,从-1开始
  •  initial:默认值为0
  •  inherit:继承父级

3.案例实战

<style type="text/css"> 
.box{width: 100px;height: 100px;}
.div{display: flex;} 
.bg0{background: #111;}.bg1{background: #444;}.bg2{background: #777;}.bg3{background: #999;}  
.o1{order:-1;}.o2{order:0;}.o3{order:1;}.o4{order:2;} 
</style>
<div class="div"> 
	<div class="box bg0">1</div>
	<div class="box bg1">2</div>
	<div class="box bg2">3</div>
	<div class="box bg3">4</div>
</div>
<div class="div po" > 
	<div class="box bg0 o4">1</div>
	<div class="box bg1 o2">2</div>
	<div class="box bg2 o3">3</div>
	<div class="box bg3 o1">4</div>
</div>

效果:

4.浏览器兼容

order是css3新增的属性,大多数现代浏览器都支持,不支持css3的浏览器也不会兼容,IE10一下不要尝试。

相关推荐:css3过渡transition笔记