Как сделать одинаковые отступы между карточками внутри контейнера с display: flex

Используй gap для создания равных отступов между элементами внутри flex-контейнера. Это современный и чистый способ, который не требует марджинов или паддингов на самих элементах.

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

Плюсы:

• Работает по обеим осям (для flex-direction: row — горизонталь, для column — вертикаль)
• Не требует сложных селекторов вроде :not(:last-child)
• Поддержка в современных браузерах (Can I Use: ~95%)

Альтернатива для старых проектов:

.card:not(:last-child) {
  margin-right: 20px; /* для row */
  margin-bottom: 20px; /* для column */
}