Problemer med flisruter på flexbokser i CSS

Det første problemet med flisruter er egentlig åpenbart med en gang - det er veldig ubeleilig at forelderen må eksplisitt sette høyden. Tross alt, det er fullt mulig at antall blokker vil endre seg dynamisk og antallet vil være noen ganger mindre, noen ganger mer enn 9.

Men det andre problemet vil oppstå hvis antallet blokker er slik at den siste raden vil ha utilstrekkelig antall blokker. I dette tilfellet vil den siste raden se forferdelig ut:

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

Det viser seg at selv horisontalt fungerer space-between dårlig i vårt tilfelle.

Oppsummering: Hvis antallet av dine underordnede elementer alltid er konstant og passer normalt inn i forelderen, så er flisruter med space-between en ganske praktisk ting. Ellers må man finne på noe annet.

Det er gitt 12 elementer. Lag en flisrute med 4 elementer per rad med bredden på hvert element på 100px og avstand mellom dem på 20px.

Det er gitt 12 elementer. Lag en flisrute med 3 elementer per rad med bredden på hvert element på 150px og avstand mellom dem på 10px.