Flex-shrink xassəsi

flex-shrink xassəsi, yerin yetməməsi halında, flex-konteynerin daxilindəki qonşu elementlərə nisbətən flex-blokunun nə qədər kiçiləcəyini müəyyən edir.

Məsələn, əgər flex-konteynerin daxilindəki bütün flex-blokları flex-shrink:1-ə malikdirsə, onda onlar eyni ölçüdə olacaqlar. Əgər onlardan biri flex-shrink:2-ə malikdirsə, onda o, qalanların hamısından 2 dəfə kiçik olacaq.

Tətbiq edilir: konkret flex blokuna.

Bu xassə qısaldılmış xassə olan flex-ın tərkib hissəsi kimi daxildir.

Sintaksis

selektor {
	flex-shrink: müsbət ədəd;
}

Susmaya görə qiymət: 1.

Nümunə

Tutaq ki, bizim 3 elementimiz var. Onların hər birinin eni 200px-dir və ümumilikdə 600px-ə bərabərdir, bu da valideyn konteynerinin enindən, yəni 350px-dən çoxdur:

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

Gəlin mənfi sərbəst yeri aşağıdakı düsturla hesablayaq:

600px - 350px = 250px

flex-shrink xassəsinin qiymətləri nəzərə alınmaqla elementlərin çəkili ümumi eni bərabər olacaq:

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

İndi birinci elementin nə qədər kiçiləcəyini müəyyən edək:

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

İkinci element:

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

Üçüncü element:

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

Belə çıxır ki, flex-shrink qiyməti 3 olan üçüncü element digər elementlərdən daha çox kiçiləcək.

Həmçinin bax

flex bloklarının oxlarının istiqamətini təyin edən flex-direction xassəsi
əsas ox boyunca düzləndirməni təyin edən justify-content xassəsi
kəsişən ox boyunca düzləndirməni təyin edən align-items xassəsi
flex bloklarının çoxsətirliliyini təyin edən flex-wrap xassəsi
flex-direction və flex-wrap üçün qısaltma olan flex-flow xassəsi
flex bloklarının sırasını təyin edən order xassəsi
bir blokun düzləndirilməsini təyin edən align-self xassəsi
konkret flex blokunun ölçüsünü təyin edən flex-basis xassəsi
flex bloklarının "acgözlüyünü" təyin edən flex-grow xassəsi
flex-grow, flex-shrink və flex-basis üçün qısaltma olan flex xassəsi