Flexbox

Flexbox is a layout mode in CSS for placing items in a single direction, either a row or a column. You turn it on with display: flex on a container, and its direct children become flexible items that share the space along one line.

Before flexbox, lining boxes up and centering them meant floats, inline-block quirks, and margin hacks. Flexbox replaces all of that with a small set of properties that say what you actually mean: pack these to the center, push them to the edges, let this one grow.

You reach for flexbox constantly on real work: navigation bars, button toolbars, a row of cards, a label next to an icon, centering a thing both ways. It is the everyday tool for one-dimensional layout.

Knowing flexbox well is the difference between fighting CSS and directing it. Most layout bugs juniors hit are really a misunderstanding of which axis a property acts on.

Setting display: flex on a container creates a flex context. Inside it there are two axes: the main axis (the direction items flow) and the cross axis (perpendicular to it). flex-direction decides which is which: row (default) runs the main axis left to right, column runs it top to bottom.

justify-content positions items along the main axis. Common values are flex-start, center, space-between, and space-around. align-items positions them along the cross axis, so align-items: center vertically centers a row of items.

gap adds consistent space between items without margin hacks. For sizing, flex-grow lets an item expand to fill spare space, flex-shrink lets it give space back, and flex-basis sets its starting size. The shorthand flex: 1 is the one you will type most, meaning grow to share space equally.