Проблеми с плочки върху флекс в CSS

Първият проблем с плочките като цяло е очевиден веднага - много неудобно е, че на родителя трябва изрично да се задава височина. В края на краищата, напълно възможно е броят на блоковете да се променя динамично и техният брой да бъде понякога по-малък, понякога по-голям от 9.

А вторият проблем ще възникне, ако броят на блоковете е такъв, че в последния ред ще има недостатъчен брой блокове. В този случай последният ред ще изглежда ужасно:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Оказва се, че дори хоризонтално стойността space-between работи зле в нашия случай.

В заключение: ако броят на вашите наследници винаги е постоянен и се побира нормално в родителя, тогава плочките върху space-between са доста удобно нещо. В противен случай ще трябва да измисляме нещо друго.