Почему пропадают пробелы между картинками при использовании flex

При использовании flex пробелы между картинками (или inline/inline-block элементами) исчезают, потому что flex-контейнер автоматически убирает пробельные символы между дочерними элементами. Это происходит из-за особенностей обработки пробелов в flex-контексте — flex-элементы рассматриваются как блоки, а не как inline-элементы.

Решение:
Используй gap для добавления отступов между элементами:

.container {
  display: flex;
  gap: 10px; /* задаёт отступы между элементами */
}

Альтернатива:
Можно добавить margin к элементам:

img {
  margin-right: 10px;
}
img:last-child {
  margin-right: 0;
}