Flex-shrink häsiýeti

flex-shrink häsiýeti, erkin meýdan ýeterliksiz bolanda, flex-konteýner içindäki goňşy elementlere garanyňda flex-blogyň näçeräk kiçeljekdigini kesgitleýär.

Mysal üçin, eger flex-konteýner içindäki ähli flex-bloklar flex-shrink:1 bolsa, olar deň ölçegde bolar. Eger olaryň biri flex-shrink:2 bolsa, ol beýlekilerden 2 esse kiçi bolar.

Ulanylýar: aýratyn flex blogyna.

Bu häsiýet, flex gysgaldylan häsiýetiň bir bölegi hökmünde girýär.

Sintaksis

selektor {
	flex-shrink: positive san;
}

Deslapky bahasy: 1.

Mysal

Bizde 3 element bolsun. Olaryň her biriniň ini 200px we jemi 600px deň, bu bolsa enesi konteýneriniň iniinden uly, ini 350px deň:

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

Gaty erkin meýdany formuladan peýdalanyp hasaplaýalyň:

600px - 350px = 250px

Elementleriň bahalandyrylan ini flex-shrink häsiýetiniň bahalaryny her element üçin göz öňünde tutup, şuna deň bolar:

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

Indi birinji element näçeräk gysyljakdygyny kesgitläýliň:

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

Ikinji element:

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

Üçünji element:

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

Şeýlelik bilen, flex-shrink bahasy 3 deň bolan üçünji element, beýleki elementlerden has köp gysylar.

Şeýle-de serediň

flex-direction häsiýeti,
flex bloklaryň ok ugruny kesgitleýär
justify-content häsiýeti,
esasy ok boýunça ýerleşmegi kesgitleýär
align-items häsiýeti,
göni ok boýunça ýerleşmegi kesgitleýär
flex-wrap häsiýeti,
flex bloklaryň köp setirliligini kesgitleýär
flex-flow häsiýeti,
flex-direction we flex-wrap üçin gysgaldylma
order häsiýeti,
flex bloklaryň tertibini kesgitleýär
align-self häsiýeti,
bir blogyň ýerleşmegini kesgitleýär
flex-basis häsiýeti,
aýratyn flex blogynyň ölçegini kesgitleýär
flex-grow häsiýeti,
flex bloklaryň "açgözlygyny" kesgitleýär
flex häsiýeti,
flex-grow, flex-shrink we flex-basis üçin gysgaldylma