Kacheln mit Flexbox in CSS

Lassen Sie uns jetzt lernen, wie man Kacheln mit Flexbox erstellt. Zuerst ordnen wir die Flex-Blöcke in mehreren Reihen an, mit drei Blöcken pro Reihe.

Dafür setzen wir für den Flex-Container eine Breite von 300px und flex-wrap auf den Wert wrap, und für die Kindelemente eine Breite von 100px:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Fügen wir nun horizontalen Abstand zwischen unseren Blöcken hinzu. Dazu vergrößern wir die Breite des Containers, um zusätzlichen Platz für die Abstände zu schaffen.

Da wir drei Blöcke pro Reihe haben, gibt es zwischen ihnen zwei Lücken. Nehmen wir an, wir wollen, dass jede Lücke eine Breite von 10px hat. Das bedeutet, die Breite des Containers muss um 20px vergrößert werden, also nicht 300px, sondern 320px.

Lassen Sie uns nun für den Container justify-content auf den Wert space-between setzen, um den gewünschten Abstand zwischen den Blöcken zu erhalten:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Fügen wir nun den gleichen Abstand zwischen den Blöcken auch vertikal hinzu. Dazu kann man die Eigenschaft align-content auf den Wert space-between setzen.

Dafür muss jedoch die Höhe des Containers festgelegt werden, da align-content sonst nicht funktioniert. Setzen wir die Höhe auf 320px. In diesem Fall passen genau drei Reihen von Blöcken mit je 100px Höhe plus zwei Abstände zwischen den Reihen von je 10px.

Lassen Sie uns das ausführen:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Alles funktioniert wunderbar, aber es gibt einige Probleme, die wir in der nächsten Lektion betrachten werden.