What is CSS Flexbox and what problem does it solve?

Flexbox is a layout mode that lets a container automatically grow, shrink, and align its children to fill the available space in a single row or column.

Before Flexbox, lining items up and distributing space evenly meant fighting with floats, inline-blocks, and margin hacks — and vertical centering was famously painful. Flexbox (short for "Flexible Box Layout") solves this by giving the container real control over its items:

• The container can grow items to fill leftover space or shrink them to avoid overflowing.
• Items can be laid out horizontally (a row) or vertically (a column).
• Many everyday layouts — toolbars, button groups, evenly spaced cards — drop to just a few lines of CSS.

Why it matters for responsive design: because the container responds dynamically as its size changes, a Flexbox layout reflows itself when the screen gets narrower, with no media-query gymnastics needed for the basic behavior.

Go deeper:

• CSS-Tricks — A Complete Guide to Flexbox — the canonical visual cheat-sheet; every flex property illustrated with diagrams.
• Wikipedia — CSS Flexible Box Layout — history and terminology of the flexbox model.