Frontend

What is Flexbox?

A one-dimensional CSS layout model that distributes space and aligns items along a row or column axis.

Definition

Flexbox (display: flex) arranges children along a main axis with automatic space distribution via justify-content, cross-axis alignment via align-items, and proportional sizing through flex-grow, flex-shrink, and flex-basis. It solved problems that plagued float-based layouts for a decade: vertical centering, equal-height columns, and reordering without touching markup. The gap property, borrowed from Grid, replaced margin hacks between items. Flexbox excels at component-level layout—navbars, button groups, media objects—while CSS Grid is the better tool when both rows and columns need coordination.

Keep the references coming

One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.