Vetia flex-shrink

Vetia flex-shrink përcakton se, sa shumë blloku fleksibel do të zvogëlohet në raport me elementët fqinjë brenda kontenierit fleksibel në rast të mungesës së hapësirës së lirë.

Për shembull, nëse të gjithë bllokët fleksibelë brenda kontenierit fleksibel kanë flex-shrink:1, atëherë ata do të jenë të madhësisë së njëjtë. Nëse njëri prej tyre ka flex-shrink:2, atëherë ai do të jetë 2 herë më i vogël se të gjithë të tjerët.

Zbatohet për: një bllok fleksibel specifik.

Kjo veti hyn si pjesë përbërëse në vetinë e shkurtuar flex.

Sintaksa

selektor {
	flex-shrink: numër pozitiv;
}

Vlera e paracaktuar: 1.

Shembull

Le të kemi 3 elementë. Gjerësia e secilit prej tyre është 200px dhe së bashku është e barabartë me 600px, që është më e madhe se gjerësia e kontenierit prind, e cila është e barabartë me 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;
}

Le të llogarisim hapësirën negative të lirë sipas formulës:

600px - 350px = 250px

Gjerësia totale e ponderuar e elementëve duke marrë parasysh vlerat e vetisë flex-shrink për secilin element do të jetë e barabartë me:

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

Tani le të përcaktojmë se sa do të zvogëlohet elementi i parë:

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

Elementi i dytë:

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

Elementi i tretë:

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

Del se elementi i tretë, te i cili vlera flex-shrink është e barabartë me 3 do të zvogëlohet më shumë se elementët e tjerë.

Shihni gjithashtu

vetia flex-direction,
e cila cakton drejtimin e akseve të bllokëve fleksibelë
vetia justify-content,
e cila cakton rreshtimin përgjatë boshtit kryesor
vetia align-items,
e cila cakton rreshtimin përgjatë boshtit tërthor
vetia flex-wrap,
e cila cakton shumërreshtshmërinë e bllokëve fleksibelë
vetia flex-flow,
shkurtim për flex-direction dhe flex-wrap
vetia order,
e cila cakton renditjen e bllokëve fleksibelë
vetia align-self,
e cila cakton rreshtimin e një blloku të vetëm
vetia flex-basis,
e cila cakton madhësinë e një blloku fleksibel specifik
vetia flex-grow,
e cila cakton lakminë e bllokëve fleksibelë
vetia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis