防止最后一项拉伸以填充容器

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 项目的大小。

此属性采用三个值：

• flex-grow
• flex-shrink
• flex-basis

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

你有flex: 50%。

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

如flexbox 规范中所定义，当flex属性中省略时，flex-grow默认为1并且flex-shrink默认为1。

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

这里有两个解决问题的方法：

1. 替换flex: 50%为flex-basis: 50%。这使flex-grow属性保留其标准默认设置，即0。

或者

2. 替换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>