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属性。
css box-ordinal-group属性语法格式
box-ordinal-group: integer;
css box-ordinal-group属性值说明
integer：整数，指示子元素的显示次序。值小的元素会显示在值高的元素前面，值相同的元素，显示顺序取决于其源次序
实例
<!doctype html><html><head><meta charset="utf-8" /><title>css3 box-ordinal-group属性设置box子元素的显示顺序</title><style type="text/css">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 */}</style></head><body><div class="box1"><p id="p1">1</p><p id="p2">2</p><p id="p3">3</p><p id="p4">4</p></div></body></html>
运行结果
以上就是css box-ordinal-group属性怎么用的详细内容。