Помогите решить проблему с блоками

Question

У меня есть в блоке товары, 4шт в ряду, и им блоку заданы такие параметры

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

Когда в ряду 4 товара - все нормально, но когда к примеру 2 товара, то оно разьезжается по сторонам, потому что justify-content: space-between. Как можно сделать так, чтобы они не разьезжались, когда меньше 4 товаров, но при этом чтобы в мобильной адаптации всё было нормально

Answer 1

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 400px;
  outline: 2px solid orange;
}

.block {
  margin-right: 25px;
  margin-bottom: 25px;
  width: 100px;
  height: 100px;
  background-color: blueviolet;
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

БЛОГ НА HUSL

Помогите решить проблему с блоками

Ответы (1 шт):