ExampleLay out the children of a div element horizontally:
Try it yourself » |
The box-orient property is not supported in any of the major browsers.
Firefox supports an alternative, the -moz-box-orient property.
Safari and Chrome support an alternative, the -webkit-box-orient property.
The box-orient property specifies whether the children of a box should be laid out horizontally or vertically.
Tip: Children within a horizontal box are displayed from left to right, and children within a vertical box are displayed top to bottom. However, the box-direction and box-ordinal-group properties can change this ordering.
Default value: | inline-axis |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object.style.boxOrient="vertical" |
box-orient: horizontal|vertical|inline-axis|block-axis|inherit; |
Value | Description |
---|---|
horizontal | Lay out children from left to right in a horizontal line |
vertical | Lay out children from top to bottom vertically |
inline-axis | Lay out children along the inline axis (map to horizontal) |
block-axis | Lay out children along the block axis (map to vertical) |
inherit | The value of the box-orient property should be inherited from the parent element |