Центрирование последнего ряда во flexbox

Если ты хочешь использовать Flexbox для равномерного размещения карточек фиксированной ширины (250px) в контейнере шириной 1200px, то стоит учитывать, что:

• В одну строку влезает максимум 4 карточки, так как 4 * 250 = 1000, остаётся 200px свободного пространства.
• При 10 карточках получится:
  • 2 строки по 4 карточки
  • 1 строка из 2 карточек

Теперь — как сделать выравнивание карточек по ширине контейнера, особенно для последней строки с 2 карточками, чтобы они не слева торчали.

💡 Решение (с Flexbox):

✅ HTML:

<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  ...
  <div class="card">10</div>
</div>

✅ CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* равномерное распределение */
  width: 1200px;
  margin: 0 auto;
}

.card {
  width: 250px;
  height: 150px;
  background: #ddd;
  margin-bottom: 20px;
}

🔍 Поведение:

• flex-wrap: wrap — перенос карточек на новые строки.
• justify-content: space-between — карточки равномерно распределяются на строке.
• На последней строке карточки будут стоять по краям, а между ними будет максимальный пробел.

Если ты хочешь, чтобы они были по центру (2 карточки на последней строке), а не по краям, используй justify-content: center, но тогда на всех строках карточки собьются в центр.

Flexbox не умеет отличать последнюю строку.