css box-ordinal-group属性是css3中新增属性，是使用来规定box子元素显示的次序，目前主流浏览器都还不支持该属性。但是一些主流浏览器有对应的私有属性来代替该属性，Internet Explorer 10支持ms-flex-order属性，Internet Explorer 10之前版本不支持弹性盒属性。Firefox内核的浏览器支持-moz-box-ordinal-group属性。Safari和Chrome内核的浏览器支持-webkit-box-ordinal-group属性。
box-ordinal-group: integer;
css box-ordinal-group属性值说明
integer：整数，指示子元素的显示次序。值小的元素会显示在值高的元素前面，值相同的元素，显示顺序取决于其源次序
立即学习“前端免费学习笔记（深入）”；
实例
css3 box-ordinal-group属性设置box子元素的显示顺序 body{background-color: #aaa;}div{width: 400px;height: 200px;border:1px solid mediumvioletred;}.box1{display:box;/* W3C */display:-ms-flexbox;/* Internet Explorer 10 */display:-moz-box;/* Firefox */display:-webkit-box;/* Safari, Opera, and Chrome */}#p1,#p2,#p3,#p4{width:50px;border:1px solid royalblue;margin-left:6px;}#p1{box-ordinal-group:2;-ms-flex-order:2; /* Internet Explorer 10 */-moz-box-ordinal-group:2; /* Firefox */-webkit-box-ordinal-group:2; /* Safari and Chrome */}#p4{box-ordinal-group:1;-ms-flex-order:1; /* Internet Explorer 10 */-moz-box-ordinal-group:1; /* Firefox */-webkit-box-ordinal-group:1; /* Safari and Chrome */}1
2
3
4
运行结果
以上就是css box-ordinal-group属性怎么用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1614630.html
微信扫一扫 
支付宝扫一扫 
