Home > Developer > Web Develop
The Box-orient property specifies that the child elements of the box should be arranged horizontally or vertically.
Tip: child elements in the horizontal box are displayed from left to right, while the child elements of the vertical box are displayed from top to bottom. However, box-direction and Box-ordinal-group can change that order.
By default, HTML DOM elements place their contents along the inline axis. This CSS property will only work with CSS display values of box or HTML elements inline-box
Grammatical Box-orient:horizontal|vertical|inline-axis|block-axis|inherit;| value | Description |
|---|---|
| Horizontal | Arranges child elements from left to right in horizontal rows. |
| Vertical | Arranges child elements vertically from top to bottom. |
| Inline-axis | Arranges child elements along the inline axis (mapped to horizontal). |
| Block-axis | Arranges child elements along the block axis (mapped to vertical). |
| Inherit | The value of the Box-orient property should be inherited from the parent element. |
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>CSS Box-orient Example</title>5 <style>6 Div.example{7 Display:-moz-box; /*Mozilla*/8 Display:-webkit-box; /*WebKit*/9 Display:Box; /*As specified*/Ten One /*children should be oriented vertically*/ A -moz-box-orient:Horizontal; /*Mozilla*/ - -webkit-box-orient:Horizontal; /*WebKit*/ - box-orient:Horizontal; /*As specified*/ the } - </style> - </Head> - <Body> + <Divclass= "Example"> - <P>I'll be, the left of my sibling.</P> + <P>I'll be to the right of my sibling.</P> A </Div> at </Body> - </HTML>Effect
CompatibleI'll be, the left of my sibling. I'll be, the left of my sibling. thebox-orientproperty will cause the above two sections in the P example to appear in the same row
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | (Yes) -webkit | (Yes) -webkit | (Yes) -moz[1] | No Support | (Yes) -webkit | 1.1-khtml 3.0-webkit |
[CSS practice] CSS box-orient
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
