Plytelių išdėstymas su automatinio pločio blokais CSS

Ankstesnėje pamokoje mūsų plytelių išdėstyme gaudavosi taip, kad elementų plotis ir jų atitraukimai kartu sudarydavo tėvinio elemento plotį. Tai šiek tiek neuniversalu. Padarykime taip, kad elementai automatiškai prisitaikytų prie tėvinio elemento pločio.

Tarkime, kad turime tokį tėvinį elementą:

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

Tegul šio plytelių išdėstymo elementai išsidėsto po 4 blokus eilėje:

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

Nustatykime mūsų blokų plotį taip, kad kiekvienas iš jų užimtų ketvirtadalį tėvinio elemento. Tam nustatykime jų dydį į 25%:

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

Nustatykite blokų plotį procentais taip, kad plytelėje būtų trys blokai eilėje.

Nustatykite blokų plotį procentais taip, kad plytelėje būtų du blokai eilėje.

Nustatykite blokų plotį procentais taip, kad plytelėje būtų po vieną bloką eilėje.