flexbox не понимаю как правильно спозиционировать блоки

Question

.container {
  max-width: 1400px;
  margin: 0 auto;
  background: red;
}

.content {
  padding-top: 30px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-card {
  width: 300px;
  height: 450px;
  background: #844527;
  padding: 10px 0;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}

<div class="container">
  <div class="content">
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
  </div>
</div>

Вот скриншот как это выглядит:

Меня устраивает justify-content: space-between;, когда элемента (product-card) четыре, потому что первый и последний элемент "приклеиваются" к краям контейнера, ну и расстояние между элементами одинаковое, но как видно на скрине если количество элементов не 4, а 1-2-3, то расстояние между ними большое, а хотелось бы, чтобы было вот так:

На самом деле думаю, что проблема такая уже была (а может много-много раз), но честно говоря, посмотрел по всем свойствам, связанным с flex'ом, ничего не нашел, если вопрос - дубликат, пожалуйста, скиньте ссылку на решение.

P.S. пытался сделать как здесь, но все равно не работает так, как надо.

P.P.S Вот для примера - сайт додо пиццы, элементы приклеены к краям контейнера, но если элемент один, он встает не в середину, а начинается слева, насколько я понял по коду там тоже используется flexbox:

Answer 1

Вы делаете justify-content: space-between. И вот что оно делает:

Distribute items evenly The first item is flush with the start.

Что в переводе: Распределяйте предметы равномерно. Первый элемент находится на одном уровне с началом.

И, вот у вас 3 элемента и он распределяет их равномерно, все правильно, ожидаемо. Я бы предположил, что вам нужно justify-content: start

Ниже рабочий код:

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  background: red;
}

.content {
  padding-top: 30px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start; /* изменил свойства для главной оси */
}

.product-card {
  width: 300px;
  height: 450px;
  margin: 20px; /* добавил отступ */
  background: #844527;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;
}

<div class="container">
  <div class="content">
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
    <div class="product-card">
    </div>
  </div>
</div>

И вот его результат -

БЛОГ НА HUSL

flexbox не понимаю как правильно спозиционировать блоки

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