CSS 3 box-ordinal-group 属性 - CSS 参考手册

CSS box-ordinal-group 属性指定一个 box 的子元素的显示顺序

具有较低值的元素显示在那些具有较高的值的元素之前

同一组值的元素显示顺序取决于他们源顺序

默认值	1
继承	no
版本	CSS3
JavaScript 语法	object.style.boxOrdinalGroup=2

语法

box-ordinal-group: *integer* ;

值说明

值	描述
integer	一个整数，指示子元素的显示顺序

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前主流浏览器都不支持 box-ordinal-group 属性

Internet Explorer 10 通过私有属性 ms-flex-order 支持

Firefox 通过私有属性 -moz-box-ordinal-group 支持

Safari 和 Chrome 通过私有属性 -webkit-box-ordinal-group 支持

Internet Explorer 9 及更早 IE 版本不支持弹性框

范例

指定的一个 box 的子元素的显示顺序

.box{
    display:-ms-flexbox;

    /* Internet Explorer 10 */
    display:-moz-box;

    /* Firefox */
    display:-webkit-box;

    /* Safari and Chrome 
    */display:box;
    border:1px solid black;
}

.ord1{
    margin:5px;-ms-flex-order:1;

    /* Internet Explorer 10 */
    -moz-box-ordinal-group:1; 

    /* Firefox */
    -webkit-box-ordinal-group:1;

    /* Safari and Chrome */
    box-ordinal-group:1;
}

.ord2{
    margin:5px;
    -ms-flex-order:2;

    /* Internet Explorer 10 */
    -moz-box-ordinal-group:2;

    /* Firefox */
    -webkit-box-ordinal-group:2;

    /* Safari and Chrome */
    box-ordinal-group:2;
}

运行范例 »