box-direction

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;

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:

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

See also

• box-orient
• box-pack
• box-align
• flex-direction