Layout with Flexbox

Flexbox lines elements up in a row or a column. Just write display: flex on the container, the element that holds them, and they fall into line on their own.

Then you control how they're spread out with three properties: gap for the space between the elements, justify-content for distributing them along the row, and flex-wrap: wrap so they move onto a new line instead of getting squeezed on narrow screens.

The row follows the page's text direction: it starts from the left on a left-to-right page and from the right on a right-to-left page, so you never have to reverse anything yourself.