css3:order随意给子元素排序

七娃博客 2020-10-29 269 次

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

1.属性定义

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

css3:order随意给子元素排序-Qui-Note

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>

效果：

css3:order随意给子元素排序-Qui-Note