Flexbox

CSS’s one-dimensional layout model — a container with display: flex lays its children out along one axis, distributing space (justify-content), aligning across the other (align-items), wrapping when told to, and letting each item declare how it grows and shrinks; the right tool for a row of things or a column of things

Most of a component’s internal layout: a button’s icon beside its label, a card’s header with a badge pushed to the end, a toolbar, a footer with a left and a right group. The rule of thumb this site follows is flex for a line, grid for a plane: when the layout is rows and columns that must align, it is CSS Grid. gap works in both now, which removed the last reason to use margins between flex items. Flexbox’s content-driven sizing is its strength and its trap — an item sized by its content can push a layout in ways a grid track would not.