Tegelwerk op Flexbox in CSS

Laten we nu leren hoe we tegels kunnen maken met flexbox. Laten we eerst de flex-blokken in meerdere rijen plaatsen, met drie blokken per rij.

Hiervoor stellen we de breedte van de flex-ouder in op 300px en flex-wrap op de waarde wrap, en de breedte van de kinderen op 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;
}

Laten we nu horizontale ruimte tussen onze blokken maken. Hiervoor vergroten we de breedte van de ouder om extra ruimte voor marge te creëren.

Aangezien we drie blokken per rij hebben, zijn er tussen hen twee tussenruimtes. Stel we willen dat elke tussenruimte een breedte heeft van 10px. Dat betekent dat de breedte van de ouder met 20px moet worden vergroot, dus niet 300px, maar 320px.

Laten we nu voor de ouder van de blokken justify-content instellen op de waarde space-between en we krijgen de gewenste afstand tussen de blokken:

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

Laten we nu dezelfde afstand tussen de blokken ook verticaal toevoegen. Hiervoor kunnen we de eigenschap align-content instellen op de waarde space-between.

Hiervoor is het echter nodig om een hoogte in te stellen voor de ouder, anders werkt align-content niet. Laten we de hoogte instellen op 320px. In dat geval passen er precies drie rijen blokken van 100px hoog plus twee tussenruimtes tussen de rijen van 10px.

Laten we het uitvoeren:

<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 werkt geweldig, maar er zijn enkele problemen die we in de volgende les zullen bekijken.