Die flex-shrink eienskap

Die eienskap flex-shrink bepaal tot water mate 'n flex-blok sal krimp in vergelyking met die aangrensende elemente binne 'n flex-houer wanneer daar nie genoeg vry spasie is nie.

Byvoorbeeld, as alle flex-blokke binne 'n flex-houer flex-shrink:1 het, sal hulle van gelyke grootte wees. As een van hulle flex-shrink:2 het, sal dit 2 keer kleiner wees as al die ander.

Van toepassing op: 'n spesifieke flex-blok.

Hierdie eienskap maak deel uit van die verkorte eienskap flex.

Sintaksis

selektor {
	flex-shrink: positiewe getal;
}

Verstekwaarde: 1.

Voorbeeld

Gestel ons het 3 elemente. Die breedte van elkeen is 200px en saam gelyk aan 600px, wat groter is as die breedte van die ouerhouer, wat gelyk is aan 350px:

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

Laat ons die negatiewe vry spasie bereken met die formule:

600px - 350px = 250px

Die geweegde totale breedte van die elemente met inagneming van die waardes van die eienskap flex-shrink vir elke element sal gelyk wees aan:

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

Laat ons nou bepaal tot water mate die eerste element sal krimp:

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

Dit blyk dat die derde element, waarvan die waarde flex-shrink gelyk is aan 3, meer sal krimp as die ander elemente.

Sien ook

die eienskap flex-direction,
wat die rigting van die flex-blokke se asse stel
die eienskap justify-content,
wat belyning langs die hoofas stel
die eienskap align-items,
wat belyning langs die dwarsas stel
die eienskap flex-wrap,
wat die veelreëlbaarheid van flex-blokke stel
die eienskap flex-flow,
verkorting vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex-blokke stel
die eienskap align-self,
wat die belyning van 'n enkele blok stel
die eienskap flex-basis,
wat die grootte van 'n spesifieke flex-blok stel
die eienskap flex-grow,
wat die "gulheid" van flex-blokke stel
die eienskap flex,
verkorting vir flex-grow, flex-shrink en flex-basis