HTML5: Your visual blueprint™ for designing rich web pages and applications

VERTICALLY ALIGN OBJECTS WITHIN A FLEXIBLE BOX

You can align box-children together on one side of the vertical axis of the Flexible Box Model. This will enable you to force child objects to appear on the top, bottom, middle, baseline, or stretched across the forced height of a flexible box.

As mentioned earlier, the term forced height refers to setting the min-height or height properties of the box-parent object to be larger than the natural height, or the height produced solely by the box-children. Forced height implies whitespace within the Flexible Box Model, and vertical alignment involves placement within that whitespace:

box-align: alignment;
-moz-box-align: alignment;
-webkit-box-align: alignment;

The alignment value can be set to ...