Tegeltjies met outobreedte blokke in CSS

In die vorige les in ons teëls het dit gebeur dat die breedte van die elemente en hul spasies in totaal die breedte van die ouer moes gee. Dit is 'n bietjie nie universeel nie. Laat ons maak sodat elemente outomaties aanpas volgens die breedte van die ouer.

Laat ons die volgende ouer hê:

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

Laat die elemente van hierdie teëlwerk in 4 blokke in 'n ry staan:

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

Laat ons die breedte van ons blokke sodanig stel dat elkeen van hulle 'n kwart van die ouer beslaan. Vir hierdie stel ons hul grootte op 25%:

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

Stel die blokke se breedte in persentasie sodat in die teëlwerk drie blokke in 'n ry word.

Stel die blokke se breedte in persentasie sodat in die teëlwerk twee blokke in 'n ry word.

Stel die blokke se breedte in persentasie sodat in die teëlwerk een blok per ry word.