Мой 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 элемента в строке

Answer 2

Сделайте это правильно -

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

Answer 3

Я бы использовал box-sizing: border-box; и flex: 0 1 25%; для .item-2

Answer 4

Рекомендую использовать flex: 0 1 auto.