In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > browser specific extensions > -moz-box-direction

-moz-box-direction property | -webkit-box-direction property

Browser support:

-moz-box-direction:

-webkit-box-direction:

Specifies the direction in which the children of a box are placed.

Only works for box objects. An element is a box object if the display property of the element has the value of -moz-box (-webkit-box) or -moz-inline-box (-webkit-inline-box).

JavaScript page for this property: MozBoxDirection | webkitBoxDirection. You can find other example(s) there.

Possible values:

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

normal

Children are placed either from left to right or top to bottom in the order the elements appear in the XUL source or document tree.

reverse

Children are placed either from right to left or bottom to top in the order the elements appear in the XUL source or document tree.

Default: normal.

Example HTML code 1:

This example illustrates the use of the -moz-box-direction and the -webkit-box-direction properties:

<head>
    <style>
        .normal {
            width: 250px;
            border: 2px solid red;

            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-direction: normal;
            -webkit-box-direction: normal;
        }
        .reverse {
            width: 250px;
            border: 2px solid red;
            
            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-direction: reverse;
            -webkit-box-direction: reverse;
        }
    </style>
</head>
<body>
    <div class="normal">
        <i>direction normal</i>
    </div>
    <br /><br />
    <div class="reverse">
        <i>direction reverse</i>
    </div>
</body>