CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 box-ordinal-group Property
Example
Specify the display order of the child element of a 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;
}
{
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;
}
Try it yourself »
Browser Support
The box-ordinal-group property is not supported in any of the major browsers.
Internet Explorer 10 supports an alternative, the -ms-flex-order property.
Firefox supports an alternative, the -moz-box-ordinal-group property.
Safari and Chrome support an alternative, the -webkit-box-ordinal-group property.
Note: Flexible boxes are not supported in Internet Explorer 9 and earlier versions.
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;
| Value | Description | Play it |
|---|---|---|
| integer | An integer that indicates the display order of the child elements | Play it » |
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
