CSS-ში ფლექს ბლოკების შეკუმშვის ფაქტორი

წინა გაკვეთილზე ჩვენ გავარკვიეთ, რომ როდესაც ფლექს ელემენტებს არ აქვთ საკმარისი ადგილი, ისინი იწყებენ შეკუმშვას. ის, თუ რამდენად არის მთლიანი სიგანე მშობელის სიგანეზე მეტი, ეწოდება უარყოფით თავისუფალ სივრცეს.

ტექნიკურად, შეკუმშვა ნიშნავს, რომ თითოეული ელემენტის სიგანიდან მოიჭრება სიგანის ნაწილი ისე, რომ ყველა ელემენტი მოერგოს თავის მშობელს.

მოდით განვახორციელოთ გარკვეული გამოთვლა. დავუშვათ, მაგალითად, ჩვენ გვაქვს 4 ელემენტი სიგანით 200px. დავუშვათ, რომ მშობელის სიგანე არის 700px. გამოდის, რომ ელემენტების მთლიანი სიგანე უდრის:

200px * 4 = 800px

ეს სიგანე 100px-ით მეტია მშობელის სიგანეზე. მოდით გამოვთვალოთ, რამდენი უნდა მოიჭრას თითოეული ელემენტიდან, რომ ისინი მოერგონ თავის მშობელს:

100px / 4 = 25px

ანუ ელემენტების სიგანე იქნება:

200px - 25px = 175px

რეალიზეთ აღწერილი ბლოკები და შეამოწმეთ გაზომვით, რომ ელემენტების სიგანე მართლაც იქნება ჩვენ მიერ გამოთვლილი.

გამოთვალეთ ბლოკების სიგანე და შემდეგ შეამოწმეთ გამოთვლები გაზომვით:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}