Flexbox

Flexbox (Flexible Box Layout) is a CSS system for arranging items along one main axis — a row or a column — then wrapping, spacing, and shrinking them as the container changes size.

It is the everyday tool behind a fluid grid for nav bars, button groups, and card rows. CSS Grid is the sibling for two-dimensional layouts (rows and columns at once). Flexbox plus media queries is how responsive design keeps usability on a phone without a second mobile site.

A real-life example of Flexbox

A Decatur clinic’s “Services” row: three cards in a line on a laptop, stacked on a phone. display: flex and flex-wrap do that — like a grocery conveyor that stays one lane until the belt is too short, then the items step down. Locked pixel widths leave a postage-stamp column on a 27-inch monitor.

Use Flexbox when the problem is “line these up and let them breathe.” Use Grid when you need a full page of tracks. How-to: Fluid Grids in Responsive Design and Why Your Website Needs Responsive Design.