html - 我的25％宽度的 flex 物品在包裹后占据100％的宽度

我有一个小问题。我一直在使用 float 来排列元素。我正在转向flexbox，我举了一些例子，一切都很好，但是我举了一个例子，事情进展不顺利。

我有一个包含1到12种产品的容器，每行4种。我仅用四个就制作了一个简单的示例，并且可以正常工作，但是现在我用五个元素进行了示例，第一行看起来不错，但是第五个元素占用了product容器的100％，但我希望它只占用25个％，第六位占25％，依此类推。

我所看到的:



这是我的代码:

<div class="container-2">
      <div class="item-2">
        ...
      </div>
      <div class="item-2 p2-2">
        ...
      </div>
      <div class="item-2">
        ...
      </div>
      <div class="item-2 pp2">
        ...
      </div>
      <div class="item-2 pp2">
        ...
      </div>
</div>

那就是我的CSS:

.container-2 {
  max-width: 1200px;
  margin: 0 auto;

  padding: 20px 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.item-2 {
  padding: 0 15px;
  flex: 1 0 25%;
  margin-bottom: 40px;
}

最佳答案

您已将项目设置为flex: 1 0 25%。

分解为:

flex-grow: 1

flex-shrink: 0

flex-basis: 25%

删除flex-grow: 1。告诉物品消耗可用空间。

试试这个:flex: 0 0 25%
有关更多详细信息和其他选项，请参阅以下文章:

Equal width flex items even after they wrap

Flexbox: 4 items per row

关于html - 我的25％宽度的 flex 物品在包裹后占据100％的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60121604/