Regulatie van het comprimeren van flexblokken in CSS

Standaard worden van alle elementen stukjes afgeknabbeld, evenredig aan de breedte van het element. Het is echter mogelijk om te regelen dat van sommige elementen grotere of kleinere stukjes worden afgeknabbeld. Hiervoor is er een speciale eigenschap flex-shrink.

Deze eigenschap vertegenwoordigt een bepaald gewicht, waarmee de breedte van het element wordt vermenigvuldigd bij het berekenen van het afgeknabbelde stukje volgens de hierboven reeds gegeven formule. Als de breedte van het element bijvoorbeeld 200px is, en zijn flex-shrink is 3, dan is de gewogen (d.w.z. vermenigvuldigd met het gewicht) breedte van het element:

200px * 3 = 600px

De formule, rekening houdend met flex-shrink, zal er als volgt uitzien: negatieve vrije ruimte * (gewogen breedte van het element / som van alle gewogen breedtes van de elementen).

Laten we een voorbeeld bekijken. Stel we hebben 4 elementen. Stel de breedte van het eerste element is 400px, en de flex-shrink is 2. De breedte van de andere elementen is 200px, en hun flex-shrink is 1. Stel de breedte van de ouder is 900px.

De totale breedte van de elementen is:

400px + 3 * 200px = 1000px

De negatieve vrije ruimte is:

1000px - 900px = 100px

De totale gewogen breedte van de elementen is:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

De gewogen breedte van het eerste element is:

400px * 2 = 800px

Van het eerste element wordt het volgende stukje afgeknabbeld:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

De breedte van het element wordt:

400px - 57.14px = 342.86px ~ 343px

De gewogen breedte van elk van de andere elementen is:

200px * 1 = 200px

Van elk element wordt het volgende stukje afgeknabbeld:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

De breedte van elk element wordt:

200px - 14.2px = 185.8px ~ 186px

Implementeer de beschreven blokken en controleer met meting of de breedte van de elementen inderdaad gelijk is aan wat wij hebben berekend.

Bereken de breedte van de blokken en controleer vervolgens de berekeningen met een 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;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Bereken de breedte van de blokken en controleer vervolgens de berekeningen met een 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;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Bereken de breedte van de blokken en controleer vervolgens de berekeningen met een meting:

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

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}