`box-orient` CSS property

Deprecated

Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.

Learn more
See full compatibility

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

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.

Syntax

css

/* 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;

Values

This property is specified as one of the following keyword values:

horizontal: The box lays out its contents horizontally.
vertical: 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.

Description

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 value	`inline-axis`
Applies to	elements with a CSS `display` value of `box` or `inline-box`
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

box-orient = 
  horizontal   |
  vertical     |
  inline-axis  |
  block-axis

Examples

Setting horizontal box orientation

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

HTML

html

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

CSS

css

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 */
}