CSS-kakel med automatisk blockbredd

I föregående lektion i vår kakel visade det sig att bredden på elementen och deras mellanrum tillsammans måste vara lika med bredden på föräldern. Detta är inte helt universellt. Låt oss göra så att elementen automatiskt anpassar sig till förälderns bredd.

Låt oss säga att vi har en förälder så här:

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

Låt elementen i denna kakel stå med 4 block per rad:

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

Låt oss ställa in bredden på våra block så att varje av dem tar upp en fjärdedel av föräldern. För att göra detta, sätt deras storlek till 25%:

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

Ställ in blockens bredd i procent så att det blir tre block per rad i kakeln.

Ställ in blockens bredd i procent så att det blir två block per rad i kakeln.

Ställ in blockens bredd i procent så att det blir ett block per rad i kakeln.