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

Эта же техника используется и в Bootstrap, а именно в его системе сетки. Однако вместо margin Bootstrap применяет padding для своих колонок.

.row {
  margin: 0 -15px;
}
.col-xx-xx {
  padding: 0 15px;
}

Таким образом, при использовании такой схемы, Bootstrap создает отступы между колонками, которые обеспечивают правильное выравнивание и распределение пространства внутри контейнера.

Вы можете использовать селектор & > * + * для имитации flex-gap (для одной строки):

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}

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

Если вам нужно поддерживать обертывание flex, вы можете использовать обертку:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper { outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* необязательно */
  overflow: hidden; /* необязательно */
}

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

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

Вы можете использовать прозрачные границы.

Я размышлял над этой проблемой, пытаясь создать модель гибкой сетки (flex grid), которая могла бы возвращаться к модели таблиц + ячеек таблиц для старых браузеров. Границы для промежутков между столбцами показались мне наилучшим вариантом, поскольку ячейки таблиц не имеют отступов.

Пример:

.column {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

Также обратите внимание, что вам нужно установить min-width: 50px; для flexbox. Модель flex не будет обрабатывать фиксированные размеры, если вы не укажете flex: none; для конкретного дочернего элемента, который вы хотите сделать фиксированным и тем самым исключить из гибкой модели. Вот пример. Однако если все столбцы имеют flex: none;, это уже не будет гибкая модель.

Вот что-то более близкое к гибкой модели: посмотрите здесь.

Таким образом, вы можете нормально использовать отступы, если вам не нужно возвращение к ячейкам таблиц для старых браузеров. Вот пример здесь.

Также необходимо установить background-clip: padding-box;, когда вы используете фон, так как в противном случае фон будет выходить за пределы области прозрачной границы.

Если вы хотите установить отступ в 10px между элементами, вы можете просто задать .item {margin-right:10px;} для всех элементов, а для последнего элемента сбросить этот отступ, используя правило .item:last-child {margin-right:0;}.

Также вы можете использовать селекторы общего соседа ~ или соседнего элемента +, чтобы установить левый отступ у элементов, кроме первого, например: .item ~ .item {margin-left:10px;} или воспользоваться селектором .item:not(:last-child) {margin-right: 10px;}.

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

Пример кода:

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

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

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

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

Обновление: свойство gap для flexbox теперь поддерживается во всех современных браузерах (Edge, Chrome, Opera, Samsung Internet, Safari, Firefox).

В конечном итоге они добавят свойство gap в flexbox. Пока же вы можете использовать CSS grid, который уже поддерживает свойство gap, и просто разместить элементы в одной строке. Это проще, чем работать с отступами.