Простой способ задать отступы между flexbox элементами

Вариант 1 — отрицательный отступ для родительского блока

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для родительского контейнера .box.

CSS

.box {
  display: flex;
  margin: 0 -5px;
}
.item {
  flex: 1 1 auto;
  margin: 0 5px;
}

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen NWGKWGJ by Denis (@deniscreative) on CodePen.dark

Вариант 2 — без отрицательного отступа с отступами по бокам

Не используем отрицательные отступы и не используем :first-child/:last-child. Задаем внутреннее поле для контейнера padding:5px и задаем отступы для дочерних элементов margin:5px. Таким образом мы получаем равномерный отступ 10px между дочерними элементами и от дочерних элементов до контейнера.

CSS

.box {
  display: flex;
  padding: 0 5px;
}
.item {
  flex: 1 1 auto;
  margin: 0 5px;
}

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 2 by Denis (@deniscreative) on CodePen.dark

Вариант 3 — фиксированная ширина с помощью calc()

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc(). Данный способ не совсем хорош для размещения флексбокс-элементов в несколько рядов, потому что элементы растягиваются по краям контейнера justify-content: space-between.

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: calc(1/3*100% - (1 - 1/3)*10px);
  margin: 0 0 10px;
}

где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 3 by Denis (@deniscreative) on CodePen.dark

Вариант 4 — фиксированная ширина с помощью calc() с отступами по бокам

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc(). Но главное отличие от предыдущего варианта, что для дочерних элементов .item заданы отступы по бокам, а для родительского контейнера .box заданы отрицательные отступы как в первом примере. И таким образом, мы можем задать justify-content: flex-start; чтобы flexbox-элементы располагались равномерно слева направо.

Я чаще всего использую этот вариант, как наиболее универсальный и удобный для размещения любых flexbox-элементов.

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -5px;
}
.item {
  width: calc(1/3*100% - 10px);
  margin: 5px;
}

где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.

HTML

<div class='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

See the Pen Uniform distribution of blocks with flex 4 by Denis (@deniscreative) on CodePen.dark

Естественно, что способов для того, чтобы задать отступы между флексбокс-элементами или для их равномерного размещения внутри контейнера, гораздо больше, и есть гораздо более изощренные варианты. Но я привел наиболее часто используемые способы и самые простые для понимания.

Итерация потомков (nth-child) с использованием SASS

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…

Плавный скролл по странице к нужному ID (Scroll to id)

Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…

Использование @keyframes с препроцессором SASS

Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…

CSS счетчики

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…

20 комментариев

Спасибо

Огромное спасибо, очень помогли

Пожалуйста! Приятно, когда информация с моего сайта помогает кому-то еще кроме меня))

Спасибо! за то, что вы это выложили )

Varfolomei

Что за бред? С отрицательными margin будет горизонтальный скрол, потому что в таком случае container увеличиться на 10px

Естественно, что блок .box должен находиться внутри контейнера с нужным отступом, который будет перекрывать отрицательный margin, или в противном случае нужно задавать родительскому контейнеру overflow: hidden.

Это, как бы, и так понятно.

Или, как по вашему, работает отрицательный отступ для блока .row в Bootstrap?

Ксения

Спасибо большое! спасли кучу моего времени)

спасибо бро! прям сохранил мне день

Продуктивного дня!)

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

Владимир

Друзья, как сделать отступ между первым флекс-элементом и остальной флекс-
группой в next.js?

Если бы показали пример в codepen — было бы понятнее

Вячеслав

нашли как сделать?

Виктор

Спасибо огромное за статью! Очень помогли.

Михаил

Большое спасибо, Денис! Очень полезная для меня статья!

Спасибо за ответ! Успехов!=)

Денис

Для отступов лучше использовать gap

Ответить