CSS Flexible Box Layout

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Reference

CSS Properties

Guides

Using CSS flexible boxes

Step-by-step tutorial about how to build layouts using this feature.

Using flexbox to lay out Web applications

Tutorial explaining how to use flexbox in the specific context of Web applications.

Specifications

Specification	Status	Comment
CSS Flexible Box Layout Module	Candidate Recommendation	Initial definition.

Browser compatibility