Flexbox: отсутствует один элемент

Question

У меня есть три элемента подряд. Мне нужно разделить их следующим образом:

flex: 0 0 20%;
max-width: 20%;
min-width: 20%;

Но результат выглядит так:

Что я хочу получить, так это то, что зеленая полоса содержит шестой элемент. Как этого добиться?

Answer 1

Вы устанавливаете ширину на 20%, что означает, что вы можете иметь ровно 5 элементов подряд. Если вы хотите, чтобы следующий элемент был перенесен в новую строку, вам нужно добавить flex-wrap: wrap

Если вы хотите, чтобы элементы всегда охватывали 100%, независимо от их количества, просто не указывайте значение виджета.

.flex {
  display: flex;
  background: blue;
}

.flex--element {
  background: green;
  flex-grow: 1;
}

<div class="flex">

<div class="flex--element">
 Element
</div>

<div class="flex--element">
 Element
</div>

<div class="flex--element">
 Element
</div>

<div class="flex--element">
 Element
</div>

</div>