We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

-moz-box-direction Redirect 1

Warning: This property reflects an old version of the specification. The -moz-box-direction will only be used for XUL while the standard box-direction has been replaced by flex-direction (which belongs to the CSS Flexible Box Layout Module currently under the Working Draft status).

See Flexbox for more information.


The CSS box-direction 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). See Flexbox for more about the properties of flexbox elements.


box-direction:         normal | reverse | inherit      /* As specified */
-moz-box-direction:    normal | reverse | inherit      /* Mozilla */
-webkit-box-direction: normal | reverse | inherit      /* WebKit */


The box lays out its contents from the start (the left or top edge).
The box lays out its contents from the end (the right or bottom edge).


.example {
  /* bottom-to-top layout */
  box-direction: reverse;           /* As specified */
  -moz-box-direction: reverse;      /* Mozilla */
  -webkit-box-direction: reverse;   /* WebKit */


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.


Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported (Yes) Not supported Not supported Not supported
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported Not supported (Yes) Not supported Not supported Not supported

See also

Document Tags and Contributors

Last updated by: Sheppy,