Problemer med fliselægning på flex i CSS

Det første problem med fliselægning er ret indlysende - det er meget ubelejligt, at forælderen er nødt til eksplicit at angive højden. For det kan godt være, at antallet af blokke ændrer sig dynamisk, og deres antal vil være både mindre og større end 9.

Og det andet problem opstår, hvis antallet af blokke er sådan, at der i den sidste række vil være utilstrækkeligt antal blokke. I dette tilfælde vil den sidste række se forfærdelig ud:

<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 sig, at selv horisontalt fungerer værdien space-between dårligt i vores tilfælde.

Resumé: Hvis antallet af dine underordnede elementer altid er konstant og passer godt i forælderen, så er fliselægning på space-between en ret bekvem ting. Ellers bliver vi nødt til at finde på noget andet.

Der er givet 12 elementer. Lav dem til en fliselægning med 4 elementer i hver række med en bredde på hvert element på 100px og en afstand mellem dem på 20px.

Der er givet 12 elementer. Lav dem til en fliselægning med 3 elementer i hver række med en bredde på hvert element på 150px og en afstand mellem dem på 10px.