CSS Flexbox

CSS Flexbox Layout Module

Prior to the Flexbox Layout module, there were four layout modes:

• Block, primarily for sections in a webpage
• Inline, mainly for text
• Table, used for two-dimensional table data
• Positioned, for explicit positioning of an element.

The Flexible Box Layout Module simplifies the creation of flexible, responsive layout structures without relying on float or positioning techniques.

Browser Support

Flexbox properties enjoy support across all modern browsers.

Flexbox Elements

To initiate utilization of the Flexbox model, you must initially designate a flex container.

The element depicted above denotes a flex container (indicated by the blue area) containing three flex items.

Example 

A flex container comprising three flex items.