html - 我的 25% 宽度 flex 元素在包装后占用 100% 宽度

Question

我有一个小问题。我总是使用 float 来安排我的元素。我正在转向 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 增长:1
• flex-shrink: 0
• flex 基础:25%

删除 flex-grow: 1。它告诉元素占用可用空间。

试试这个:flex: 0 0 25%

有关更多详细信息和其他选项，请参阅这些帖子:

• Equal width flex items even after they wrap
• Flexbox: 4 items per row