Простой способ задать отступы между 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

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