The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
- Vertically centering a block of content inside its parent.
- Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
- Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
Flexbox makes a lot of layout tasks much easier.
Open index.html for a demonstration of the effects different properties and values configurations have on flex content.