前景:你有没有在布局子元素的时候,想pc和wap不一样,有的子元素需要向前排序,用float有时候不方便,中间还夹杂着其它子元素,定位也会麻烦,需要写一堆兼容css,那么你可以试试order这个属性
1.属性定义
order: 设置或检索弹性盒模型对象的子元素出现的順序,就是给子元素排序,前提是父级盒子为弹性布局flex或网格布局grid,官方还提到绝对定位中也可以用。网格和弹性盒子中,我测试成功,但是绝对定位没试过。
![](https://i-blog.csdnimg.cn/blog_migrate/7df1b0c5b31f9be01fc3562ba848f07a.jpeg)
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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/c9689387a7a9b2ad875bb7272938f717.jpeg)
4.浏览器兼容
order是css3新增的属性,大多数现代浏览器都支持,不支持css3的浏览器也不会兼容,IE10一下不要尝试。
相关推荐:css3过渡transition笔记
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:
css3:order随意给子元素排序 -
Qui-Note