A flex-shrink tulajdonság

A flex-shrink tulajdonság határozza meg, hogy egy flex blokk mennyire zsugorodik össze a szomszédos elemekhez képest a flex konténeren belül, ha nincs elég szabad hely.

Például, ha minden flex blokk a flex konténeren belül flex-shrink:1 értékkel rendelkezik, akkor egyforma méretűek lesznek. Ha az egyiknek flex-shrink:2 az értéke, akkor az 2 alkalommal kisebb lesz, mint az összes többi.

Alkalmazása: egyedi flex blokkra.

Ez a tulajdonság részeként szerepel a rövidített tulajdonságnak, a flex-nek.

Szintaxis

selector {
	flex-shrink: pozitív szám;
}

Alapértelmezett érték: 1.

Példa

Tegyük fel, hogy 3 elemünk van. Mindegyik szélessége 200px, összesen tehát 600px, ami több, mint a szülői konténer szélessége, amely 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;
}

Számítsuk ki a negatív szabad teret a képlet segítségével:

600px - 350px = 250px

Az elemek súlyozott szélességének összege a flex-shrink tulajdonság értékeinek figyelembevételével minden elem esetében:

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

Most határozzuk meg, mennyire zsugorodik az első elem:

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

A második elem:

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

A harmadik elem:

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

Kiderül, hogy a harmadik elem, amelynek a flex-shrink értéke 3, jobban zsugorodik, mint a többi elem.

Lásd még

a flex-direction tulajdonság,
amely a flex blokkok tengelyirányát határozza meg
a justify-content tulajdonság,
amely a főtengely mentén igazít
a align-items tulajdonság,
amely a keresztirányú tengely mentén igazít
a flex-wrap tulajdonság,
amely a flex blokkok többsoros elrendezését határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap számára
a order tulajdonság,
amely a flex blokkok sorrendjét határozza meg
a align-self tulajdonság,
amely egy blokk igazítását határozza meg
a flex-basis tulajdonság,
amely egy adott flex blokk méretét határozza meg
a flex-grow tulajdonság,
amely a flex blokkok "növekedési tényezőjét" határozza meg
a flex tulajdonság,
rövidítés a flex-grow, flex-shrink és flex-basis számára