For an element with hbox or vbox CSS class, child items will be placed in the direction of the "main" axis.
The main axis for a element with vbox is vertically downwards.
The main axis for a element with hbox is horizontally towards the right.
The "cross" axis is always perpendicular to the main axis. i.e. for vbox, cross-axis is horizontally towards the right and for
hbox, cross axis is vertically downwards.
Example usage
vbox and 3 child items
Auto height
Flex
Auto height
hbox and 3 child items
Auto width
Flex
Auto width
Note: By default, child items stretch along the cross-axis.
vbox main-center
(single child)
main-centered div
hbox main-center
(single child)
main-centered div
vbox cross-center
(with single child)
cross-centered div
hbox cross-center
(with single child)
cross-centered div
vbox main-center cross-center
(single child)
cross-centered & main-centered div
hbox main-center cross-center
(single child)
cross-centered & main-centered div
vbox cross-stretch
(single child)
cross-stretched div
hbox cross-stretch
(single child)
cross-stretched div
hbox inside vbox
Auto height vbox item
Auto width hbox itemFlex width hbox itemAuto width hbox item
Auto height vbox item
Caveat
If you want body element to expand to viewport, you'll have to set html and body to 100% height.
And then add vbox or hbox css class on body to enable flexbox on child items.
This applies to body and html only since their heights are auto initally and other flexboxes (children) depends on their height.
UC Browser
Wrapping of child items (i.e. when there isn't enough space to fit child items into a single line) doesn't work on UC browser.
IE Caveat
IE 10 and 11 needs a pixel or percentage height and width on root element if element is positioned absolute,
else vbox will render weird (min-height and min-width doesn't fix them either).
The following won't look fine on IE 10,11 (it looks fine on MS Edge):
Auto height vbox item
Auto width hbox itemFlex width hbox itemAuto width hbox item