Как задать расстояние между flex-элементами?

Во Flexbox расстояние между элементами можно задать несколькими способами, и выбор зависит от того, нужен ли фиксированный отступ или распределение свободного места.

Свойство gap

Самый современный и удобный способ — gap (или row-gap / column-gap) на flex-контейнере. Оно добавляет отступ только между элементами, не создавая лишних отступов по краям контейнера.

.container {
  display: flex;
  gap: 16px;
}

Отступы через margin

Классический подход — задать margin-right всем элементам, кроме последнего, либо использовать отрицательный margin у контейнера. Это работает во всех браузерах, но требует дополнительных селекторов.

.item:not(:last-child) {
  margin-right: 16px;
}

justify-content

Значения space-between, space-around, space-evenly распределяют свободное пространство между элементами. Это не фиксированный отступ, а динамический, зависящий от ширины контейнера.

• space-between — первый и последний прижаты к краям.
• space-around — равные отступы вокруг каждого элемента.
• space-evenly — равные промежутки между всеми элементами и краями.

Итог: для фиксированного расстояния между flex-элементами используйте gap — это самый чистый и предсказуемый вариант. margin подойдёт для поддержки старых браузеров, а justify-content — когда нужно распределить свободное пространство, а не задать конкретный отступ.