1. Home
  2. CSS3 box-ordinal-group property

The best CSS3 box-ordinal-group property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Attribute definitions and instructions,grammar,

CSS3 box-ordinal-group property

Examples

Display order of the child elements 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;
}

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

The current mainstream browsers do not support box-ordinal-group property.

Internet Explorer 10 by private property ms-flex-order support.

Firefox by private property -moz-box-ordinal-group support.

Safari and Chrome by private property, -webkit-box-ordinal-group support.

Note: Internet Explorer 9 and earlier versions of IE do not support flexible box.

Attribute definitions and instructions

box-ordinal-group attribute specifies a box of the child element of the display order.

A display element having a lower value before those elements with higher values ​​in.

Note: The elements of the same set of values of the order, depending on their source order.

Defaults: 1
inherit: no
version: CSS3
JavaScript syntax: object .style.boxOrdinalGroup = 2

grammar

box-ordinal-group:integer;

value description
integer An integer that indicates the display order of sub-elements

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 box-ordinal-group property
10/30