Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. The -moz-box-direction
will only be used for XUL while the previous standard box-direction
has been replaced by flex-direction
. See flexbox for information about the current standard.
The box-direction
CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).
/* Keyword values */ box-direction: normal; box-direction: reverse; /* Global values */ box-direction: inherit; box-direction: initial; box-direction: unset;
Initial value | normal |
---|---|
Applies to | elements with a CSS display value of box or inline-box |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The box-direction
property is specified as one of the keyword values listed below.
Values
normal
- The box lays out its contents from the start (the left or top edge).
reverse
- The box lays out its contents from the end (the right or bottom edge).
-
Formal syntax
normal | reverse | inherit
Examples
.example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* Mozilla */ -webkit-box-direction: reverse; /* WebKit */ box-direction: reverse; /* As specified */ }
Notes
The edge of the box designated the start for layout purposes depends on the box's orientation:
Horizontal | left |
---|---|
Vertical | top |
The edge opposite to the start is designated the end.
If the direction is set using the element's dir
attribute, then the style is ignored.
Specifications
- Flexible Box Layout Module (W3C Working Draft) Note: The current state of this specification does not reflect Mozilla's or WebKit's older implementations.
- Old Flexible Box Layout Module Note: Mozilla and WebKit's implementations used to reflect this version of the specification.
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit | (Yes)-webkit | (Yes)-moz[1] | No support | (Yes)-webkit | 1.1-khtml 3.0-webkit |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | (Yes)-webkit | (Yes) -moz[1] | No support | ? | 1.0-webkit |
[1] In addition to the -moz
prefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.