Возможно ли задать гибкий отступ при для flex элементов, расположенных в несколько строк?

Question

[The_good_game]

Вопрос задан не корректно, поскольку я не до конца понимаю, как правильно можно назвать данный отступ. Попробую наглядно продемострировать нужное поведение.
Имеется контейнер с пятью флекс элементами внутри.

<div id="container">
  <div class="card firstCard">
  <div class="card secondCard">
  <div class="card thirdCard">
  <div class="card fourthCard">
  <div class="card fifthCard">
</div>

Каждый .card имеет фиксированные размеры (например, width: 100px; height: 100px;). Размер контейнера может быть разный, поэтому заранее неизветно, сколько .card будет в каждом ряду. Также я планирую при помщи JS создавать новые .card элементы, поэтому их точное количество также неизвестно. Возможно ли на чистом CSS реализовать что-то подобное?

Comments

[Вадим]

На самом деле вообще не понятно о чём Вы спрашиваете :-) В вопросе про отступы, на рисунке отступ одинаковый - две клеточки. В тексте про отступы ни слова.
Судя по описанию и рисунку Вам нужна сетка. Сетку можно построить на флексах, но у Вас напрашиваются css grid.

[Lynn «Кофеман»]

+1 за grid

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/mdOedZO

Answer 2

[approximate solution]

Если я правильно понял, вам нужен gap
https://habr.com/ru/post/468327/

Менять gap - медиазапросами, в зависимости от разрешения экрана.

Answer 3

[lagudal]

Или вот еще пример, здесь отступ задается как переменная

https://coryrylan.com/blog/css-gap-space-with-flexbox