Your Search Results


    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

    Help improve compatibility tables by filling out this 11 question survey.

    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: chrisAnderson,
    Hide Sidebar