Faktori i Ngjeshshmërisë së Blloqeve Flex në CSS

Në mësimin e mëparshëm zbuluam se, kur elementeve flex u mungon hapësirë, ata fillojnë të ngjeshen. Hapësira negative e lirë referohet me sa gjerësia totale e elementeve është më e madhe se gjerësia e prindit.

Nga ana teknike, ngjeshja nënkupton që një pjesë e gjerësisë i hiqet çdo elementi në mënyrë që të gjithë elementet të përshtaten brenda prindit të tyre.

Le të bëjmë disa llogaritje. Le të themi, për shembull, se kemi 4 elemente me gjerësi 200px. Le të themi se gjerësia e prindit është 700px. Kjo do të thotë se gjerësia totale e elementeve është:

200px * 4 = 800px

Kjo gjerësi është 100px më e madhe se gjerësia e prindit. Le të llogarisim sa duhet të hiqet nga çdo element në mënyrë që elementet të përshtaten brenda prindit të tyre:

100px / 4 = 25px

Kjo do të thotë se gjerësia e elementeve do të jetë:

200px - 25px = 175px

Implementoni blloqet e përshkruara dhe kontrolloni me matje, se gjerësia e elementeve do të jetë vërtet e barabartë me atë që kemi llogaritur.

Llogaritni gjerësinë e blloqeve, dhe më pas kontrolloni llogaritjet me matje:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}