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

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

CSS

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

HTML

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

Вариант 2.

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

CSS

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

HTML

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

See the Pen Better way to set distance between flexbox items by Denis (@deniscreative) on CodePen.0

Вариант 3.

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc()

HTML

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flexbox div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin-bottom: 10px;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

CSS

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>