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:

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

.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.

Er zijn 12 elementen. Maak er een tegellay-out van met 4 elementen per rij, met een breedte van elk element van 100px en een afstand tussen hen van 20px.

Er zijn 12 elementen. Maak er een tegellay-out van met 3 elementen per rij, met een breedte van elk element van 150px en een afstand tussen hen van 10px.