Flex布局row wrap模式下，如何让最后一项不占用剩余宽度？

问题原因 #

你当前的.item设置了flex: 1 1 auto，其中flex-grow: 1会让弹性元素在容器有剩余空间时自动拉伸填充，这就是最后一项会占用容器剩余宽度的核心原因。

解决方案一：直接关闭元素拉伸能力 #

将.item的flex属性调整为flex: 0 1 auto，取消元素的主动拉伸特性：

.container {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid salmon;
}

.item {
  flex: 0 1 auto; /* 修改此属性 */
  min-width: 50px;
  height: 6rem;
  padding: 1rem;
  box-sizing: border-box;
  background-color: teal;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
}

<div class="container">
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content in the item</div>
</div>

修改后，元素只会在空间不足时收缩到min-width设定的50px，不会主动拉伸，宽度完全由自身内容决定（内容宽度小于50px时保持50px）。

解决方案二：伪元素占位适配多行对齐场景 #

如果希望前面行的元素能均匀填充容器宽度，仅最后一行元素保持自身宽度，可以给容器添加伪元素，让它占据最后一行的剩余空间：

.container {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid salmon;
}

.container::after {
  content: "";
  flex: 1; /* 伪元素拉伸占据剩余空间 */
}

.item {
  flex: 1 1 auto;
  min-width: 50px;
  height: 6rem;
  padding: 1rem;
  box-sizing: border-box;
  background-color: teal;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
}

这种方式下，前面行的元素会因flex-grow:1均匀填充容器宽度，最后一行的剩余空间会被伪元素占据，目标元素就不会被强制拉伸。

内容的提问来源于stack exchange，提问作者MGX