CSS3 box-orientProperty
Example
Specify that the child elements of a div element are arranged horizontally:
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;
}
{
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;
}
Try it Yourself »
Browser Support
Currently, all major browsers do not support the box-orient property.
Firefox supports this through the private property - MOZ-box-orient.
Safari, Opera, and Chrome support this via the private property -webkit-box-orient.
Attribute definition and usage instructions
The box-orient property specifies whether a box's child elements should be arranged horizontally or vertically.
Tip:In a horizontal box, child elements are displayed from left to right; in a vertical box, they are arranged from top to bottom. However,box-directionDirection can bebox-ordinal-groupThe attribute changes this order.
| Default Value: | inline-axis |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.boxOrient="vertical" |
Syntax
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
| Value | Description |
|---|---|
| horizontal | Specify that the child elements are arranged from left to right on a horizontal line. |
| vertical | Vertically arrange child elements from top to bottom |
| inline-axis | The child elements are laid out along the inline axis (mapped to horizontal). |
| block-axis | The child elements are laid out along the block axis (mapped to vertical). |
| inherit | The value of the box-orient property should be inherited from the parent element. |