Tegelwerk met automatische blokbreedte in CSS

In de vorige les gebeurde het in ons tegelwerk dat de breedte van de elementen en hun marges samen de breedte van de ouder moesten vormen. Dit is niet erg universeel. Laten we het zo maken dat de elementen automatisch worden aangepast aan de breedte van de ouder.

Stel dat we een ouder hebben zoals deze:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Stel dat de elementen van dit tegelwerk met 4 blokken per rij staan:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Laten we de breedte van onze blokken zo instellen dat elk ervan een kwart van de ouder inneemt. Hiervoor stellen we hun grootte in op 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Geef de blokken een breedte in percentages, zodat er drie blokken per rij in de tegel komen.

Geef de blokken een breedte in percentages, zodat er twee blokken per rij in de tegel komen.

Geef de blokken een breedte in percentages, zodat er één blok per rij in de tegel komt.