Последние два блока слева при justify-content space-between

Рейтинг: 0Ответов: 1Опубликовано: 06.03.2023

Есть список блоков по 4 в ряд, сделана по ширене родительского с помощью justify-content space-between Последний ряд имеет 2 блока и естественное их раскидывает тоже в разные стороны. Можно ли как-то это победить? В текущем виде или же без флексбокса.

Есть блок

.catalog {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

И внутри размещены DIV'ы

nQuadr-item-wrapper {
    width: calc((100% - 36px) / 4);
    display: flex;
    flex-direction: column;
}

Получается по 4 блока в ряду. Так вот все они четко и красиво растягиваются по ширине с помощью justify-content space-between Но остается в последнем ряду 2 блока вместо 4х и их раскидывает тоже по ширине родительского блока (т.е. справа и слева), как можно вот эти 2 блока сделать слева? чтобы их не раскидывало по ширине?

Вот наглядно https://prnt.sc/VgRd-cE6JuPi

Подойдет в принципе любой способ, не принципиально прям флексбоксом. Заранее спасибо.

css html flexbox
Источник: Stack Overflow на русском

Ответы

▲ 0

как можно вот эти 2 блока сделать слева? чтобы их не раскидывало по ширине?

Поскольку у тебя точный расчет ширины элементов - не обязательно использовать justify-content: space-between;.

Можно просто указать "расчетный" промежуток.

* {
  mapgin: 0;
  padding: 0;
}
.catalog {
    display: flex;
    flex-wrap: wrap;
    /*
    justify-content: space-between;
    */
    gap: 12px;
}

.nQuadr-item-wrapper {
    width: calc((100% - 36px) / 4);
    display: flex;
    flex-direction: column;
    /* оформление */
    min-height: 50px;
    background-color: blue; 
}
<div class='catalog'>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
</div>

Подойдет в принципе любой способ, не принципиально прям флексбоксом.

Тогда grid можно использовать...

.catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nQuadr-item-wrapper {
  min-height: 50px;
  background-color: blue;
}
<div class='catalog'>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
  <div class='nQuadr-item-wrapper'></div>
</div>