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

Допустим есть элементы, которые надо вывести в ряд (например по три элемента в строчку).

<div class="items">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

Сделать это можно через свойство display: flex.

.items {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 30%;
}

Код выше будет выводить все элементы .item на одной строке (за это отвечает display: flex).

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

На примере выше элементы выводятся вплотную друг к другу. Чтобы задать отступ, используется свойство gap.

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* задать отступ */
}

.item {
  width: 30%;
}

Результат:

Игры для изучения flex

Игры, для изучения flex.

1. Перемещать лягушки: flexboxfroggy.com/#ru
2. Защита башень: flexboxdefense.com/

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

• Flex
• Grid
• Bootstrap