css - 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>