Flexbox：缺少一个元素

Question

我连续有三个元素。我需要按以下方式对其进行划分：

fun filterList(original: List<Worker>, startAge: Int?, maxSalary: Int?): List<Worker> {
    val list = original.filter { worker ->
        startAge isNullOr { worker.age >= it } && maxSalary isNullOr { worker.salary <= it }
    }
    return list
}

但是结果看起来像这样：

我确切想要得到的是绿色条包含第六个元素。如何实现呢？

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>