box-orient

Used to specify the layout direction of child elements inside a flexible box. Since browser support is currently limited to webkit-based browsers, there may be few use cases. A flexible box is a flexible container where sizes and layouts can be specified relatively. Block-level elements such as those with 'display:block;' or regular 'div' elements can be turned into flexible boxes by specifying 'box' as the value of 'display'. As mentioned, since support is limited to webkit-based browsers and requires the vendor prefix 'webkit', you must specify '-webkit-box' when using it.

Sample Code

display:-webkit-box;

-webkit-box-orient:inline-axis; /* Child elements are displayed along the inline axis */
-webkit-box-orient:block-axis; /* Child elements are displayed along the block axis */
-webkit-box-orient:horizontal; /* Child elements are displayed horizontally from left to right */
-webkit-box-orient:vertical; /* Child elements are stacked vertically from top to bottom */
-webkit-box-orient:inherit; /* Inherits the value from the parent element */

Available Values

Value	Description
inline-axis	Child elements are displayed along the inline axis (initial value)
block-axis	Child elements are displayed along the block axis (initial value)
horizontal	Child elements are displayed horizontally from left to right
vertical	Child elements are stacked vertically from top to bottom
inherit	Inherits the value from the parent element

Browser Preview

<div style="background:#FF0; display:-webkit-box; -webkit-box-orient:inline-axis; padding:5px;">
	<div style="background:#F00;">1st div element</div>
	<div style="background:#0F0;">2nd div element</div>
	<div style="background:#0FF;">3rd div element</div>
</div>

<div style="background:#FF0; display:-webkit-box; -webkit-box-orient:block-axis; padding:5px;">
	<div style="background:#F00;">1st div element</div>
	<div style="background:#0F0;">2nd div element</div>
	<div style="background:#0FF;">3rd div element</div>
</div>

<div style="background:#FF0; display:-webkit-box; -webkit-box-orient:horizontal; padding:5px;">
	<div style="background:#F00;">1st div element</div>
	<div style="background:#0F0;">2nd div element</div>
	<div style="background:#0FF;">3rd div element</div>
</div>

<div style="background:#FF0; display:-webkit-box; -webkit-box-orient:vertical; padding:5px;">
	<div style="background:#F00;">1st div element</div>
	<div style="background:#0F0;">2nd div element</div>
	<div style="background:#0FF;">3rd div element</div>
</div>

<div style="background:#FF0; display:-webkit-box; -webkit-box-orient:inherit; padding:5px;">
	<div style="background:#F00;">1st div element</div>
	<div style="background:#0F0;">2nd div element</div>
	<div style="background:#0FF;">3rd div element</div>
</div>