How to orient the child elements of a box, vertically or horizontally.
Syntax
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.
Examples:
h1 { box-orient: horizontal; }
.emw3class { box-orient: vertical; }
#emw3id { box-orient: horizontal; }
Try it:
Line1 Line2 Line3 |
(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
Related:
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.