Die Faktor van Drukbaarheid van Flex Blokke in CSS

In die vorige les het ons uitgevind dat, wanneer flex elemente nie genoeg spasie het nie, hulle begin druk. Dit, hoeveel die totale breedte meer as die ouer se breedte is, word negatiewe vrye spasie genoem.

Tegnies beteken druk dat 'n stukkie breedte van elke element afgeknip word sodat alle elemente binne hul ouer pas.

Kom ons doen 'n berekening. Laat ons sê, byvoorbeeld, ons het 4 elemente met 'n breedte van 200px. Laat die ouer se breedte gelyk wees aan 700px. Dit beteken dat die totale breedte van die elemente gelyk is aan:

200px * 4 = 800px

Hierdie breedte is 100px meer as die ouer se breedte. Kom ons bereken hoeveel van elke element afgeknip moet word sodat die elemente binne hul ouer pas:

100px / 4 = 25px

Dit beteken die breedte van die elemente sal wees:

200px - 25px = 175px

Implementeer die beskryfde blokke en gaan na deur meting, dat die breedte van die elemente inderdaad gelyk is aan wat ons bereken het.

Bereken die breedte van die blokke, en toets dan die berekeninge deur meting:

<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;
}