Flexin'

This page is a CSS3 Flexible Layout demonstration. Using a number of alignment controls, it shows how flexbox layout properties can be used to easily achieve layouts that were more difficult in CSS2.1.
This page is a simple CSS3 Flexible Layout demonstration. Use the controls below to realign the four test boxes and resize your window to check their flexibility.
Horizontal Alignment

Center

Justify

Vertical Alignment

Top

Center

Bottom

Flexibility

Fixed

Flex middle boxes

Horizontal Alignment adjusts the -ms-box-pack property.

Vertical Alignment adjusts the -ms-box-align property.

Flexibility adjusts the -ms-box-flex property.

This module describes a CSS box model for interface design.

You can very easily center your elements vertically and horizontally.

Using the controls above, these four boxes can be aligned and spaced by adjusting two CSS properties on their container.

The Flexibility controls allows the two middle boxes to shrink based on the amount of available space while the other two preserve their size.

Using dynamic updates of properties, this page demonstrates the layout capability of CSS3 Flexbox; in particular, the ease with which boxes can be aligned, centered and control over the distribution of available space between them;