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

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.

Formal definition

Formal syntax

normal | reverse | inherit

Examples

Setting box direction

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

Specifications

Not part of any standard.

Browser compatibility

See also

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