Mastering Layout Design with Flexbox in CSS

Flexbox is a new layout mode in CSS3.Flex stands for flexible, adaptive. This is an approach to layout creation, alignment of elements and distribution of extra space. Flex boxes are thus flexible elements of the layout. One of the main advantages of flexbox is the ability to fill extra space without the need to use JavaScript.

Flexbox is a layout model in CSS that allows you to easily create flexible and responsive layouts for your web pages. It provides a way to distribute space among items in a container, align items within a container, and control the layout of items along a single axis or multiple axes.

The previous version of CSS defined four layout modes:

block layout for laying out documents.
inline layout for laying out text.
table layout for laying 2D tabular data.
positioned layout for explicit positioning.

CSS3 introduced two new layout methods as an alternative to abusing floats and tables:

Flexbox layout distributes space along a single column or row. Like float layouts.
Grid layout divides space into columns & rows.

CSS Tutorial

Properties Reference

CSS Properties Reference Guide