Probleme mit Kacheln in CSS-Flexboxen

Das erste Problem mit Kacheln ist im Grunde sofort offensichtlich - es ist sehr unpraktisch, dass das Elternelement explizit eine Höhe angeben muss. Schließlich kann es durchaus vorkommen, dass sich die Anzahl der Blöcke dynamisch ändert und ihre Anzahl mal weniger, mal mehr als 9 beträgt.

Das zweite Problem tritt jedoch auf, wenn die Anzahl der Blöcke so ist, dass in der letzten Reihe eine unzureichende Anzahl von Blöcken vorhanden ist. In diesem Fall wird die letzte Reihe abscheulich aussehen:

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

Es stellt sich heraus, dass sogar horizontal der Wert space-between in unserem Fall schlecht funktioniert.

Zusammenfassend lässt sich sagen: Wenn die Anzahl Ihrer Kindelemente immer konstant ist und gut in das Elternelement passt, dann sind Kacheln mit space-between eine recht praktische Sache. Andernfalls muss man sich etwas anderes einfallen lassen.

Gegeben sind 12 Elemente. Erstellen Sie daraus ein Kachel-Layout mit 4 Elementen pro Reihe, mit einer Breite jedes Elements von 100px und einem Abstand dazwischen von 20px.

Gegeben sind 12 Elemente. Erstellen Sie daraus ein Kachel-Layout mit 3 Elementen pro Reihe, mit einer Breite jedes Elements von 150px und einem Abstand dazwischen von 10px.