Вывод нескольких элементов в ряд (Flex)

Вывести элементы в ряд можно через параметры flex и flex-wrap.

<div class="flex flex-wrap">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

Параметр flex-wrap отвечает за то, чтобы элементы переносились на следующую строчку (иначе все элементы будут выводиться в одну строчку).

Результат:

На примере выше элементы выводятся вплотную друг к другу. Добавить отступ можно через параметр gap-{уровень отступа}.

<div class="flex flex-wrap gap-3">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

Результат:

Похожие страницы

• Flex
• Grid
• Bootstrap
• Tailwind CSS