Добавление пространства между элементами flexbox

Вы должны учесть несколько вещей.

Прежде всего; с justify-content вы определяете, как обрабатывается оставшееся пространство. При использовании space-between ваши элементы будут выровнены так, чтобы пространство между ними было равным, при установке center оставшееся пространство будет вокруг всех элементов, при этом все элементы будут склеены.

Однако в вашем случае свободного места нет, потому что ваши элементы фактически растягивают div. Так что это тебе не поможет.

Следующий; вы установили ширину элемента на 50%. И это нормально, ваш item будет занимать 50% области просмотра. Это потому, что ваша сетка неявно будет составлять 100% области просмотра. Но поскольку ваше изображение выходит за пределы поля, вы можете установить поля, если хотите, и они будут размещать элементы дальше друг от друга, но вам нужны большие поля, чтобы их действительно видеть. Больше, чем переполнение вашего изображения.

Итак, чтобы исправить это, вы сделаете изображения адаптивными, сделав их шириной, равной ширине элемента;

.item img { display: block; height: auto; width: 100%; }

Но это создает другую проблему; flexbox пытается изменить размер своих гибких элементов, чтобы все это поместилось в гибкий контейнер. Итак, вы увидите, что он автоматически изменяет размер ваших элементов, чтобы они все поместились. Чтобы исправить это, вы должны явно указать ширину ваших элементов;

.item { flex: 0 0 50%; }

Это сокращение от;

.item { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; }

Итак, в основном вы говорите; Сделайте мой предмет 50% его контейнера, и не используйте свой потрясающий алгоритм, чтобы попытаться сделать его больше или меньше.

Теперь у вас есть то, что вы хотите, и вы можете использовать margin-right: 20px, например, чтобы создать пространство в 20 пикселей между вашими элементами.

Полный фрагмент;

.grid { display: flex; width: 100%; }

.item { flex: 0 0 50%; margin-right: 20px; }
.item img { display: block; height: auto; width: 100%; }

.article-scroll-mobile {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  flex-wrap: nowrap;
  text-align: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /*For iOS smooth scroll effect*/
}

<div class = "grid article-scroll-mobile">
  <div class = "item">
    <img src = "https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class = "item">
    <img src = "https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class = "item">
    <img src = "https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class = "item">
    <img src = "https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class = "item">
    <img src = "https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class = "item">
    <img src = "https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
</div>