De eigenschap flex-shrink

De eigenschap flex-shrink bepaalt in welke mate een flex-blok zal krimpen ten opzichte van de aangrenzende elementen binnen de flex-container bij gebrek aan vrije ruimte.

Als bijvoorbeeld alle flex-blokken binnen een flex-container flex-shrink:1 hebben, dan zullen ze even groot zijn. Als een van hen flex-shrink:2 heeft, dan zal deze 2 keer kleiner zijn dan alle anderen.

Is van toepassing op: een specifiek flex-blok.

Deze eigenschap maakt deel uit van de shorthand-eigenschap flex.

Syntaxis

selector {
	flex-shrink: positief getal;
}

Standaardwaarde: 1.

Voorbeeld

Stel we hebben 3 elementen. De breedte van elk is 200px en samen zijn ze 600px, wat meer is dan de breedte van de bovenliggende container, die 350px is:

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

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

Laten we de negatieve vrije ruimte berekenen met de formule:

600px - 350px = 250px

De totale gewogen breedte van de elementen rekening houdend met de waarden van de eigenschap flex-shrink voor elk element is:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Laten we nu bepalen hoeveel het eerste element krimpt:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Tweede element:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Derde element:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Hieruit blijkt dat het derde element, waarvan de waarde flex-shrink 3 is, meer krimpt dan de andere elementen.

Zie ook

de eigenschap flex-direction,
die de richting van de assen van flex-blokken bepaalt
de eigenschap justify-content,
die de uitlijning langs de hoofdas bepaalt
de eigenschap align-items,
die de uitlijning langs de cross-as bepaalt
de eigenschap flex-wrap,
die het afbreken van flex-blokken over meerdere regels bepaalt
de eigenschap flex-flow,
shorthand voor flex-direction en flex-wrap
de eigenschap order,
die de volgorde van flex-blokken bepaalt
de eigenschap align-self,
die de uitlijning van een enkel blok bepaalt
de eigenschap flex-basis,
die de grootte van een specifiek flex-blok bepaalt
de eigenschap flex-grow,
die de "groei" van flex-blokken bepaalt
de eigenschap flex,
shorthand voor flex-grow, flex-shrink en flex-basis