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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content