Flislegging med automatisk blokkbredde i CSS

I forrige leksjon fikk vi det slik i flisleggingen vår at bredden på elementene og deres marger til sammen måtte gi bredden på forelderen. Dette er litt ikke universelt. La oss gjøre slik at elementene automatisk tilpasser seg til forelderens bredde.

La oss si at vi har en forelder som dette:

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

La elementene i denne flisleggingen stå med 4 blokker på rad:

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

La oss sette bredden på blokkene våre slik at hver av dem tar en fjerdedel av forelderen. For å gjøre dette setter vi deres størrelse til 25%:

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

Sett blokkene en bredde i prosent slik at det blir tre blokker på rad i flisleggingen.

Sett blokkene en bredde i prosent slik at det blir to blokker på rad i flisleggingen.

Sett blokkene en bredde i prosent slik at det blir én blokk på rad i flisleggingen.