html - 防止最后一项拉伸(stretch)以填满容器

Question

我不明白为什么最后一个元素会拉伸(stretch)以填满容器的宽度，我该如何更改以使其与其他元素一样只填满 50%？

.container {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex: 50%;
    background:green;
}

<div class="container">
  <div class="item">
    Item
  </div>
  <div class="item">
    Item
  </div>
  <div class="item">
    Item
  </div>
  <div class="item">
    Item
  </div>
  <div class="item">
    Item
  </div>
</div>

Answer 1

您正在使用 flex 调整 flex 元素的大小速记属性。

此属性采用三个值:

• flex 增长
• flex 收缩
• flex 基础

要理解的关键点是，在 flex 属性中省略值实际上并不会删除这些值，它会激活回退值。

您有 flex: 50%。

该规则省略了 flex-grow 和 flex-shrink。

如 flexbox specification 中所定义，当在 flex 属性中省略时，flex-grow 默认为 1 而 flex-shrink 默认为 1。

所以 flex: 50% 等同于 flex: 1 1 50%。这就是为什么您的最后一项会占用所有可用空间的原因。

这里有两个问题的解决方案:

1. 将 flex: 50% 替换为 flex-basis: 50%。这使 flex-grow 属性保留在其 standard default setting, which is 0 处。 .

或

1. 将 flex: 50% 替换为 flex: 0 0 50%，这会覆盖所有默认的 flex 属性设置。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 0 50%;
  background: lightgreen;
}

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>