Как убрать непонятный отсуп у flex?

Question

[heyyolicket]

Есть код:

<div class="container">
  <div class="flex">
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
  </div>
</div>

.container {
  display: flex;
  justify-content: flex-start;
  background: red;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background: #000;
}

.flex__item {
  width: 80px;
  height: 80px;
  background: yellow;
}

Он дает такой результат:


Справа появляется непонятный отсуп между блоками и краем черного элемента. Но если увеличить ширину, экрана, блоки располагаются в одной линии и отступ пропадает:



И мне непонятно, откуда берется этот отсуп. Как от него избавиться?

Между желтыми блоками должен быть фиксированный отсуп - 10px. Между крайними правыми желтыми блоками и концом черного элемента отсуп так же 10px. Черный элемент должен заканчиваться ровно после этого отсупа, не создавая других. Ширина и длина желтого блока - ровно 80px

Comments

[iBird Rose]

что значит откуда отступ? это последний блок не влез и спустился вниз. а оставшиеся блоки не достают до конца строки потому что и ширина фиксированая и отступы между ними
p.s. или я не понял о чем ты

[heyyolicket]

iBird Rose, да, но можно ли сделать так, чтобы когда блок не влезает и перемещается на строку вниз, черный элемен прижался к последнему желтому блоку?

[iBird Rose]

heyyolicket, к примеру добавь:

.flex {
  justify-content: space-between;
}

но отступы между блоками уже будут другие

[heyyolicket]

[FrelFrloich]

heyyolicket, нет такого варианты, вы хотите что бы блоки сохранили ширину и отступы, при этом умудрились занять всё пространство.

[Ankhena]

FrelFrloich, ну зачем же так категорично

[Ankhena]

Если элементов больше, чем на одну строку, то можно гридами и width: fit-content
https://jsfiddle.net/04faL38r/
Для универсальности можно подключать JS либо писать на CSS условия с помощью last-child и nth-child, пользуясь вот этим руководством.

Аналогично, флексами для однострочного варианта https://jsfiddle.net/wr43nk0x/

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

[FrelFrloich]

Ankhena, вы не поняли, он хочет оставить 8 блоков с одинаковой шириной и отступами, но при этом что бы они при flex-wrap остались такой же шырины и такими же отступами.

[FrelFrloich]

Ankhena, А нет, это я не прав наверное, о размере контейнера речи не шло вроде. Я думал и контейнер должен остаться прежним.