Список Flexbox 8, есть на 2 строки

Question

У меня есть флексбокс со списком из 8 предметов.Я хочу, чтобы 4 были в каждом ряду.Я попытался ясно: и то, и другое нацелено на n-го ребенка, но безуспешно.Можно ли это сделать, ориентируясь только на CSS?Я не имею никакого контроля над HTML, так что это будет единственный способ решить эту проблему.

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex-list {
  padding: 5px 2.5%;
  margin-top: 10px;
  flex: 1;
}

<div class="flex-container">
  <div class="flex-list">
    <h5>one</h5>
    <p>aa</p>
  </div>
  <div class="flex-list">
    <h5>two</h5>
    <p>bb</p>
  </div>
  <div class="flex-list">
    <h5>three</h5>
    <p>cc</p>
  </div>
  <div class="flex-list" style="">
    <h5>four</h5>
    <p>dd</p>
  </div>
  <div class="flex-list">
    <h5>five</h5>
    <p>ee</p>
  </div>
  <div class="flex-list">
    <h5>six</h5>
    <p>ff</p>
  </div>
  <div class="flex-list">
    <h5>seven</h5>
    <p>gg</p>
  </div>
  <div class="flex-list">
    <h5>eight</h5>
    <p>hh</p>
  </div>
</div>

Answer 1

Используйте flex-wrap: wrap и flex-basis для каждого элемента 25%.И не забудьте установить box-sizing: border-box для каждого элемента.

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.flex-list {
  padding: 5px 2.5%;
  margin-top: 10px;
  flex-basis: 25%;
  box-sizing: border-box;
}

<div class="flex-container">
  <div class="flex-list">
    <h5>one</h5>
    <p>aa</p>
  </div>
  <div class="flex-list">
    <h5>two</h5>
    <p>bb</p>
  </div>
  <div class="flex-list">
    <h5>three</h5>
    <p>cc</p>
  </div>
  <div class="flex-list" style="">
    <h5>four</h5>
    <p>dd</p>
  </div>
  <div class="flex-list">
    <h5>five</h5>
    <p>ee</p>
  </div>
  <div class="flex-list">
    <h5>six</h5>
    <p>ff</p>
  </div>
  <div class="flex-list">
    <h5>seven</h5>
    <p>gg</p>
  </div>
  <div class="flex-list">
    <h5>eight</h5>
    <p>hh</p>
  </div>
</div>

Answer 2

Общий случай: вы можете принудительно создать строку после 4-го элемента Flex, вставив :: псевдо 100% ширину прямо здесь. Даже если первые 4 элемента не заполняют 1-ю строку, this :: pseudo потребуется занимать только одну строку, поэтому элементы с 5 по 8 перейдут в другую строку.
Вам нужно переместить первые 4 элемента перед псевдо :: с отрицательным order.

РЕДАКТИРОВАТЬ: IMHO CSS3 Расположение сетки здесь предпочтительнее, если вы хотите горизонтальное выравнивание между строками.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-list {
  flex: 1;
  padding: 5px 2.5%;
  margin-top: 10px;
}

.flex-list:nth-child(-n+4) {
  order: -42;
  flex: none;
  width: 7.5%;
  background: lightgreen;
}

.flex-container::before {
  content: "";
  width: 100%;
}

<div class="flex-container">
  <div class="flex-list">
    <h5>one</h5>
    <p>aa</p>
  </div>
  <div class="flex-list">
    <h5>two</h5>
    <p>bb</p>
  </div>
  <div class="flex-list">
    <h5>three</h5>
    <p>cc</p>
  </div>
  <div class="flex-list" style="">
    <h5>four</h5>
    <p>dd</p>
  </div>
  <div class="flex-list">
    <h5>five</h5>
    <p>ee</p>
  </div>
  <div class="flex-list">
    <h5>six</h5>
    <p>ff</p>
  </div>
  <div class="flex-list">
    <h5>seven</h5>
    <p>gg</p>
  </div>
  <div class="flex-list">
    <h5>eight</h5>
    <p>hh</p>
  </div>
</div>

Answer 3

Если вы не можете изменить код HTML, используйте width и flex-flow: row wrap следующим образом:

    .flex-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        width: 400px; /* or whatever */
    }

    .flex-list {
        margin-top: 10px;
        width: 100px;  /* or whatever */
    }

Fiddle: https://jsfiddle.net/ouftrspb/1/