The Flex Formatting Context

The Flexbox model is a modern layout system in CSS designed to make it easier to create flexible and efficient layouts. Traditional layout techniques like floats, inline-block, and positioning often require complex workarounds to align and distribute space among elements, especially when building responsive interfaces. Flexbox solves these problems by providing a straightforward way to align, justify, and space elements dynamically, making it ideal for building navigation bars, galleries, and other layouts that need to adapt to different screen sizes.

When you set display: flex on an element, you turn it into a flex container. This action establishes a new flex formatting context for its direct children, which are called flex items.

In the example above, the div with the class container is the flex container. Its direct children—each div with the class item—become flex items. The flex container controls how its flex items are laid out, allowing you to align them horizontally or vertically, control their spacing, and make them responsive.

This separation of roles is fundamental: the flex container sets the layout rules, while the flex items are arranged according to those rules. This model is the foundation for all layouts you will build using Flexbox.