Ominaisuus flex-shrink

Ominaisuus flex-shrink määrittää sen, kuinka paljon flex-lohko kutistuu suhteessa naapurielementteihin flex-säiliön sisällä kun vapaata tilaa ei ole riittävästi.

Esimerkiksi, jos kaikilla flex-säiliön sisällä olevilla flex-lohkoilla on flex-shrink:1, ne ovat yhtä suuria. Jos yhdellä niistä on flex-shrink:2, se on 2 kertaa pienempi kuin kaikki muut.

Sovelletaan: yksittäiseen flex-lohkoon.

Tämä ominaisuus on osana lyhennettyä ominaisuutta flex.

Syntaksi

valitsija {
	flex-shrink: positiivinen luku;
}

Oletusarvo: 1.

Esimerkki

Oletetaan, että meillä on 3 elementtiä. Kunkin leveys on 200px ja yhteensä 600px, mikä on enemmän kuin vanhempakontainerin leveys, joka on 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;
}

Lasketaan negatiivinen vapaa tila kaavalla:

600px - 350px = 250px

Elementtien painotettu kokonaisleveys ottaen huomioon kunkin elementin flex-shrink-ominaisuuden arvot tulee olemaan:

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

Määritetään nyt kuinka paljon ensimmäinen elementti kutistuu:

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

Toinen elementti:

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

Kolmas elementti:

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

Käy ilmi, että kolmas elementti, jonka arvo flex-shrink on 3 kutistuu enemmän kuin muut elementit.

Katso myös

ominaisuus flex-direction,
joka asettaa flex-lohkojen akseleiden suunnan
ominaisuus justify-content,
joka asettaa tasauksen päähalkaisijaa pitkin
ominaisuus align-items,
joka asettaa tasauksen poikittaishalkaisijaa pitkin
ominaisuus flex-wrap,
joka määrittää flex-lohkojen monirivisyyden
ominaisuus flex-flow,
lyhenne flex-directionille ja flex-wraplle
ominaisuus order,
joka asettaa flex-lohkojen järjestyksen
ominaisuus align-self,
joka asettaa yhden lohkon tasauksen
ominaisuus flex-basis,
joka asettaa tietyn flex-lohkon koon
ominaisuus flex-grow,
joka asettaa flex-lohkojen "ahneuden"
ominaisuus flex,
lyhenne flex-growille, flex-shrinkille ja flex-basikselle