Problemen met tegellay-out op flexbox in CSS

Het eerste probleem met de tegellay-out is eigenlijk meteen duidelijk - het is erg onhandig dat de ouder expliciet een hoogte moet opgeven. Het is immers best mogelijk dat het aantal blokken dynamisch verandert en hun aantal soms minder, soms meer is dan 9.

Het tweede probleem doet zich voor als het aantal blokken zodanig is dat er in de laatste rij een onvoldoende aantal blokken staat. In dat geval ziet de laatste rij er verschrikkelijk uit:

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

Результат:

Het blijkt dat zelfs horizontaal de waarde space-between in ons geval niet goed werkt.

Conclusie: als het aantal van uw child-elementen altijd constant is en goed past in de ouder, dan is de tegellay-out met space-between een vrij handige oplossing. Anders zul je iets anders moeten bedenken.