Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Warning: This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See flexbox for information about the current standard.

The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

/* Keyword values */
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/* Global values */
box-orient: inherit;
box-orient: initial;
box-orient: unset;


The box-orient property is specified as one of the keyword values listed below.



The box lays out its contents horizontally.


The box lays out its contents vertically.

inline-axis (HTML)

The box displays its children along the inline axis.

block-axis (HTML)

The box displays its children along the block axis.

The inline and block axes are the writing-mode dependent keywords which, in English, map to horizontal and vertical respectively.


HTML DOM elements lay out their contents along the inline-axis by default. This CSS property will only apply to HTML elements with a CSS display value of box or inline-box.

Formal definition

Initial valueinline-axis (horizontal in XUL)
Applies toelements with a CSS display value of box or inline-box
Computed valueas specified
Animation typediscrete

Formal syntax

Error: could not find syntax for this item


Setting horizontal box orientation

Here, the box-orient property will cause the two <p> sections in the example to display in the same line.


<div class="example">
    <p>I will be to the left of my sibling.</p>
    <p>I will be to the right of my sibling.</p>


div.example {
  display: -moz-box;                /* Mozilla */
  display: -webkit-box;             /* WebKit */
  display: box;                     /* As specified */

  /* Children should be oriented vertically */
  -moz-box-orient: horizontal;      /* Mozilla */
  -webkit-box-orient: horizontal;   /* WebKit */
  box-orient: horizontal;           /* As specified */



Not part of any standard.

Browser compatibility

BCD tables only load in the browser

See also