Problemi pločica na fleks boksovima u CSS

Prvi problem pločice je, uopšte, očigledan odmah - vrlo je nezgodno to što roditelju moramo eksplicitno zadati visinu. Uostalom, vrlo je moguće da će se broj blokova dinamički menjati i da će njihov broj ponekad biti manji, a ponekad veći od 9.

A drugi problem će se pojaviti ako je broj blokova takav da u poslednjem redu bude nedovoljan broj blokova. U tom slučaju poslednji red će izgledati užasno:

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;
}

Результат:

Ispada da čak i horizontalno, vrednost space-between ne radi dobro u našem slučaju.

Da rezimiramo: ako je broj vaših potomaka uvek konstantan i normalno se uklapa u roditelja, onda je pločica sa space-between prilično zgodna stvar. U suprotnom, moraćemo da smislimo nešto drugo.