防止最后一件物品拉伸以填充容器

Question

我不知道为什么最后一个项目会拉伸以填充容器的宽度，如何更改内容以使其仅填充其他容器的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-grow
• flex-shrink
• flex-basis

要理解的关键点是，忽略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。

OR

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>