O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

box-orient

Values:

horizontal | vertical | inline-axis | block-axis

Initial value:

inline-axis

Applies to:

Elements with a display value of box or inline-box

Inherited:

No

Computed value:

As declared

Description:

Defines the direction in which flexible boxes are arranged within their parent box. horizontal boxes arrange the flexible boxes from left to right, and vertical boxes from top to bottom. inline-axis and block-axis have language-dependent effects; in a left-to-right, top-to-bottom language such as English, they are equivalent to horizontal and vertical.

Examples:

#nav {box-orient: horizontal;}
#sidebar {box-orient: vertical;}

Note:

This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required