Flexbox

Give a parent element display: flex, and its direct children line up in a row. Common properties: flex-direction decides row or column, justify-content controls how items are spread along the main direction (start, center, pushed to both ends), align-items controls alignment in the other direction, gap sets the space between children, and flex: 1 on a child makes it fill the remaining space.

Flex is great at "one-dimensional" layouts: a navbar with the logo on the left and buttons on the right, button groups, an icon next to text, vertical centering. When items don't fit, use flex-wrap: wrap to wrap them onto new lines.

How it splits the work with CSS Grid: Flex lays things out along one line, and each row does its own thing. Grid lays things out on a grid of rows and columns, which suits card walls and full-page frames where rows and columns both need to line up. If there's only one row or one column, Flex is enough.