Хосияти flex-shrink

Хосияти flex-shrink инро муайян мекунад, ки блоки флексӣ чӣ қадар нисбат ба унсурҳои ҳамсоя дар дохили контейнери флексӣ дар сурати кам будани ҷои холӣ хурд карда мешавад.

Масалан, агар ҳама блокҳои флексӣ дар дохили контейнери флексӣ flex-shrink:1 дошта бошанд, пас онҳо андозаи якхела доранд. Агар яке аз онҳо flex-shrink:2 дошта бошад, пас он 2 маротиба хурдтар аз ҳамаи дигар хоҳад буд.

Барои: блоки муайяни флексӣ истифода мешавад.

Ин хосият ҳамчун қисми таркибӣ ба хосияти ихтисоркардаи flex дохил мешавад.

Синтаксис

интихобкунанда {
	flex-shrink: рақами мусбат;
}

Қимати пешфарз: 1.

Намуна

Фарз кунем, ки мо 3 унсур дорем. Паҳнои ҳар яке аз онҳо 200px мебошад ва ҳамагӣ ба 600px баробар аст, ки аз паҳнои контейнери волидайн, ки 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;
}

Биёед фазои манфии холӣро бо формулаи зерин ҳисоб кунем:

600px - 350px = 250px

Паҳнои вазниншудаи умумии унсурҳо дар назардошти қиматҳои хосияти flex-shrink барои ҳар як унсур баробар хоҳад буд:

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

Ҳоло муайян мекунем, ки унсури аввал чӣ қадар кам мешавад:

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

Унсури дуюм:

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

Унсури сеюм:

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

Маълум мешавад, ки унсури сеюм, ки қимати flex-shrink-и он ба 3 баробар аст, аз унсурҳои дигар бештар кам хоҳад шуд.

Инчунин нигаред

хосияти flex-direction,
ки самти меҳварҳои блокҳои флексӣ-ро таъин мекунад
хосияти justify-content,
ки ҳамворкуниро тибқи меҳвари асосӣ таъин мекунад
хосияти align-items,
ки ҳамворкуниро тибқи меҳвари тирназананда таъин мекунад
хосияти flex-wrap,
ки серхаттии блокҳои флексӣ-ро таъин мекунад
хосияти flex-flow,
ихтисоркарда барои flex-direction ва flex-wrap
хосияти order,
ки тартиби блокҳои флексӣ-ро таъин мекунад
хосияти align-self,
ки ҳамворкунии як блокро таъин мекунад
хосияти flex-basis,
ки андозаи блоки муайяни флексӣ-ро таъин мекунад
хосияти flex-grow,
ки ғаразмандии блокҳои флексӣ-ро таъин мекунад
хосияти flex,
ихтисоркарда барои flex-grow, flex-shrink ва flex-basis