How to orient the child elements of a box, vertically or horizontally.

      box-orient: horizontal | vertical | inline-axis | block-axis ;

horizontal - Lay out children from left to right.
vertical - Lay out children from top to bottom.
inline-axis - Lay out children along the inline (horizontal) axis.
block-axis - Lay out children along the (vertical) block axis.

h1 { box-orient: horizontal; }
.emw3class { box-orient: vertical; }

#emw3id { box-orient: horizontal; }

Try it:




(CSS 3) Browser Support: None (yet), use the equivalent -moz-box-orient for Firefox and -webkit-box-orient for Safari, Opera, and Chrome.

“It wasn't a matter of courage or dreams, but something a whole lot simpler. A pilot would call it ground orientation. I'd spent a long time circling above the clouds, looking for life, while Hallie was living it” ~ Barbara Kingsolver


box-orient - MDN Web Docs.
box-align - Align the child elements of a box.
box-direction - The direction in which children of a box are displayed.
box-flex - Whether the children of a box are flexible or inflexible in size.
box-ordinal-group - Display order of the child elements of a box.
box-pack - Define the horizontal or vertical position or a box.

Copyright © 2013-2022
Some rights reserved