Plokkid automaalse laiusega plokkidena CSS-is

Eelmises õppetükis meie plokkides juhtus nii, et elementide laius ja nende taanded pidid kokku andma vanema elemendi laiuse. See pole veidi universaalne. Teeme nii, et elemendid kohaneksid automaatselt vanema elemendi laiusega.

Oletame, et meil on selline vanem element:

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

Oletame, et selle ploki elemendid on 4 plokki reas:

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

Määrame oma plokkide laiuse nii, et iga neist võtaks veerandi vanemast elemendist. Selleks paneme nende suuruseks 25%:

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

Määrake plokkidele laius protsentides nii, et plokis oleks kolm plokki reas.

Määrake plokkidele laius protsentides nii, et plokis oleks kaks plokki reas.

Määrake plokkidele laius protsentides nii, et plokis oleks üks plokk reas.