Равномерно расставить блоки

Question

На родителе:

display: flex;
gap: 15px;
padding: 15px;
flex-wrap: wrap;
justify-content: flex-start;

На дочерних блоках:

display: flex;
gap: 5px;
align-content: flex-start;
flex-wrap: wrap;
flex: 1;
min-width: 300px;

Все хорошо, расставляет дочерние блоки по сетке. Дочерние блоки растягиваются по необходимости. Но если на каждой строчке по 5 блоков, а на последнюю остается один. То последний блок расстягиватеся на всю ширину родителя.

Вопрос в том, как оставить все как есть, единственное, выполнить так, чтобы последние блоки были равны по ширине предыдущем. Чтобы если строчка заполнена не целиком, блоки не растягивались во всю ее ширину.

Только не грид, плиз, ради влекса все переделывала с грида...

Answer 1

если всё правильно понял, то вот

UPD

добавил расчет базы с calc(33% - 10px * 2), хотя перекос всё равно остался.
сжал селектор

function add(id) {
  let x = document.getElementById(id);
  x.appendChild(document.createElement('div'));
}

.f {
  display: flex;
  gap: 15px;
  padding: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
  border: 1px solid blue;
}

.f>* {
  display: flex;
  gap: 5px;
  align-content: flex-start;
  flex-wrap: wrap;
  flex-basis: calc(33% - 10px*2); /*исходный размер*/
  flex-grow: 1; /*даём возможность растянуться больше базы всем*/
  border: 3px solid red;
  padding: 3px;
  background: pink;
  height: 1em;
}

/*все после кратного 3ём из последних 3ёх(т.е. все висящие при разбивке именно по 3)*/
.f > :nth-last-child(-n+3):nth-child(3n) ~ *
  {
  border: 3px solid blue;
  background: skyblue;
  flex-grow: 0; /* а теперь отнимаем растяжимость у висящих*/
}

<input type='button' onclick='add("x")' value='+ добавить'>
<div class="f" id='x'>
</div>

добавил альтернативный вариант(с выбором не висящих а первых)
собственно добавил его в .f:not(:hover), (при наведении вариант только с базой, т.е. без резиновых детей вовсе, на случай если выяснится что растяжимость первых элементов и не требовалась)

function add(id) {
  let x = document.getElementById(id);
  x.appendChild(document.createElement('div'));
}

.f {
  display: flex;
  gap: 15px;
  padding: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
  border: 1px solid blue;
}

.f>* {
  display: flex;
  gap: 5px;
  align-content: flex-start;
  flex-wrap: wrap;
  flex-basis: calc(33% - 10px * 2);
  flex-grow: 0; /* фиксируем размер всех */
  border: 3px solid red;
  padding: 3px;
  background: pink;
  height: 1em;
}

.f:not(:hover) > :nth-child(-n+2) {
  flex-shrink: 1;
  border: 3px solid green;
  background: lime;
  flex-grow: 1; /* но возвращаем растяжимость первым двум */
}

<input type='button' onclick='add("x")' value='+ добавить'>
<div class="f" id='x'>
</div>

БЛОГ НА HUSL

Равномерно расставить блоки

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

UPD