⛶ Flexbox Layout

Flex Container and Flex Items

Flexbox works on a parent–child relationship. Set display: flex on the parent container. All direct children become flex items that are automatically laid out in a row (or column).

The Two Axes

Flex layout has two axes. The main axis runs in the direction of flex-direction (default: horizontal/row). The cross axis is perpendicular to it.

• justify-content controls alignment along the main axis — use it to center items or add space between them
• align-items controls alignment along the cross axis — use it to vertically center items in a row

Wrapping and Gaps

By default flex items all try to fit on one line. Add flex-wrap: wrap to let them wrap to new rows when they run out of space. Use gap to add consistent spacing between items without using margins.