我的25%宽度挠曲项目包装后的宽度是100%。

Question

我有个小问题。我总是用浮动来安排我的元素。我要搬到柔性箱，我做了一些例子，一切都很好，但我正在做一个例子，事情并不顺利。

我有一个集装箱，有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%

有关更多细节和其他选项，请参见以下帖子：

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

Answer 2

我建议使用flex: 0 1 auto。

Answer 3

我会用box-sizing: border-box;和flex: 0 1 25%;来表示.item-2