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.

Summary

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.

Syntax

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

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).

Examples

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

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

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

Contributors to this page: Sheppy
Last updated by: Sheppy,
Hide Sidebar