Definition and Usage
The box-orient property specifies whether the children of a box should be laid out horizontally or vertically.
Note: 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" |
Syntax
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
Values
| 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 |
Examples
div {
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
