box-ordinal-group property

Author admin Reading 1 min Views 524 Published by March 1, 2012 Modified by September 20, 2024

Contents

Definition and Usage
Syntax
Values
Examples

Definition and Usage

The box-ordinal-group property specifies the display order of the child elements of a box.

Elements with a lower value are displayed before those with a higher value.

Note: The display order of the elements with the same group value depend on their source order.

Default value:	1
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.boxOrdinalGroup=2

Syntax

 box-ordinal-group: integer;

Values

Value	Description
integer	An integer that indicates the display order of the child elements

Examples

.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; 
  
}