我的 25% 宽度的柔性项目在包装后占用 100% 的宽度

Question

我有一个小问题。我总是使用浮动来排列我的元素。我正在转向 Flexbox，我做了一些例子，一切都很好，但我正在做一个事情进展不顺利的例子。

我有一个容器，里面有 1 到 12 种产品，每行 4 种。我只使用四个元素做了一个简单的示例，它正在工作，但现在我正在制作一个包含五个元素的示例，第一行看起来不错，但第五个元素占用产品容器的 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;
}

Answer 1

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

这可以分解为：

• flex-grow: 1
• flex-shrink: 0
• flex-basis: 25%

消除flex-grow: 1。它告诉项目消耗可用空间。

尝试这个：flex: 0 0 25%

有关更多详细信息和其他选项，请参阅以下帖子：

• 即使在包裹后也具有等宽的弹性项目
• Flexbox：每行 4 个项目