Как регулировать расстояние в галерею изображений с помощью элементов гибких элементов с Margins

в макетах Flexbox, элементы с изгиб значения '0 0 25%' имеют фиксированную ширину и не сжимаются или не растут. Чтобы добавить пространство между этими элементами, сохраняя сетку, похожую на сетку, можно применять маржу. Однако применение маржину 1% приводит к пробелам, которые могут быть слишком большими.

для достижения маржи 1PX используйте изгиб -значение '1 0 22%'. Это устанавливает Flex-Basis на 22%, гарантируя, что в строке всего четыре элемента. Значение гибкого роста устанавливается на 1, что позволяет элементам расти и заполнять оставшееся пространство, оставленное по краям. Это создает тонкий разрыв в 1PX между элементами.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}