Flexbox

Flexbox, short for CSS Flexible Box Layout, is a way to lay out elements along one direction at a time, either a row or a column. You turn an element into a flex container with display: flex, and its direct children become flex items that line up next to each other and can stretch or shrink to fill the space.

Flexbox works along two axes. The main axis follows flex-direction, which is a row by default, and justify-content controls how items are spaced along it; the cross axis runs perpendicular to it, and align-items controls alignment in that direction. The gap property adds space between items, flex-wrap lets items move onto new lines, and the flex shorthand on an item, such as flex: 1, sets how much it grows or shrinks compared with its siblings.

Imagine books on a shelf with adjustable bookends: you can push them all to the left, center them, spread them out evenly, or let some books expand to fill the gap. Flexbox is the everyday tool for navigation bars, toolbars, button groups, rows of cards, and the famously tricky task of centering something both horizontally and vertically, and all modern browsers support it.

Flexbox is often compared with CSS Grid. Flexbox is one-dimensional and sizes items from their content outward, which suits components where items flow in a line, while Grid is two-dimensional and controls rows and columns at the same time, which suits page layouts and galleries. Most modern sites use both, often Grid for the overall page structure and Flexbox inside individual components.