თვისება flex-shrink

თვისება flex-shrink განსაზღვრავს, რამდენად შემცირდება flex-ბლოკი შედარებით მეზობელ ელემენტებთან flex-კონტეინერში თავისუფალი ადგილის ნაკლებობის შემთხვევაში.

მაგალითად, თუ ყველა flex-ბლოკი flex-კონტეინერის შიგნით აქვს flex-shrink:1, მაშინ ისინი იქნებიან თანაბარი ზომის. თუ ერთ-ერთ მათგანს აქვს flex-shrink:2, მაშინ ის იქნება 2 ჯერ უფრო პატარა, ვიდრე ყველა დანარჩენი.

გამოიყენება: კონკრეტულ flex ბლოკზე.

ეს თვისება შედის შემოკლებული თვისების 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,
რომელიც ადგენს flex ბლოკების ღერძების მიმართულებას
თვისება justify-content,
რომელიც ადგენს გასწორებას მთავარი ღერძის მიმართ
თვისება align-items,
რომელიც ადგენს გასწორებას განივი ღერძის მიმართ
თვისება flex-wrap,
რომელიც ადგენს flex ბლოკების მრავალსტრიქონიანობას
თვისება flex-flow,
შეკვეცა flex-direction-ისა და flex-wrap-ისთვის
თვისება order,
რომელიც ადგენს flex ბლოკების თანმიმდევრობას
თვისება align-self,
რომელიც ადგენს ერთი ბლოკის გასწორებას
თვისება flex-basis,
რომელიც ადგენს კონკრეტული flex ბლოკის ზომას
თვისება flex-grow,
რომელიც ადგენს flex ბლოკების "მოწევას"
თვისება flex,
შეკვეცა flex-grow-ის, flex-shrink-ის და flex-basis-ისთვის