Как перенести Flex элемент на новую строку?

Question

[Dishbeat]

Есть 8 блоков-карточек, в них только спан для будущей иконки и параграф с текстом. Столкнулся с проблемой: Flex ни в какую не переносит 4 элемента на следующую строку, как ни крути.

<div class="container">
      <h2 class="section-heading">
        Преимущества
      </h2>
      <ul class="section-advantages-list">
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Идейные соображения высшего порядка, а также постоянный количественный рост
          </p>
        </li>
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Значимость этих проблем настолько очевидна, что вопрос остаётся открытым
          </p>
        </li>
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Таким образом реализация плановых заданий играет важную роль для понимания
          </p>
        </li>
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Повседневная практика показывает, что сложившаяся структура организации
          </p>
        </li>
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Равным образом рамки и место обучения кадров способствует подготовки сотрудника
          </p>
        </li>
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Консультация с активом влечёт за собой процесс внедрения услуг нашего сервиса
          </p>
        </li>
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Повседневная практика показывает, что дальнейшее развитие различных 
          </p>
        </li>
        <li class="section-advantages-item">
          <span class="section-advantages-icon"></span>
          <p class="section-advantages-card-description">
            Значимость этого настолько очевидна, что консультация наших экспертов помогает
          </p>
        </li>
      </ul>
    </div>

.section-advantages-list {
    display: flex;
}

.section-advantages-item {
    flex: 1 1 25%; 
}

Comments

[Anonymous]

flex-wrap: wrap;

Answer 1

[TtT RrR]

flex-wrap: wrap;