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

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

ეს თვისება წარმოადგენს გარკვეულ წონას, რომელზეც გამრავლდება ელემენტის სიგანე მოჭრილი ნაჭრის გამოთვლისას ზემოთ მოყვანილი ფორმულის მიხედვით. მაგალითად, თუ ელემენტის სიგანე უდრის 200px, ხოლო მისი flex-shrink უდრის 3, მაშინ წონილი (ანუ წონაზე გამრავლებული) ელემენტის სიგანე იქნება ტოლი:

200px * 3 = 600px

ფორმულა flex-shrink-ის გათვალისწინებით ექნება შემდეგი სახი: უარყ. თავის. სივრცე * (ელემენტის წონილი სიგანე / ყველა ელემენტის წონილი სიგანეების ჯამი).

მოდით შევხედოთ მაგალითს. დავუშვათ, ჩვენ გვაქვს 4 ელემენტი. დავუშვათ პირველი ელემენტის სიგანე უდრის 400px, ხოლო flex-shrink უდრის 2, დანარჩენი ელემენტების სიგანე - 200px, ხოლო მათი flex-shrink უდრის 1. დავუშვათ მშობელის სიგანე 900px.

ელემენტების საერთო სიგანე უდრის:

400px + 3 * 200px = 1000px

უარყოფითი თავისუფალი სივრცე იქნება ტოლი:

1000px - 900px = 100px

ელემენტების საერთო წონილი სიგანე უდრის:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

პირველი ელემენტის წონილი სიგანე უდრის:

400px * 2 = 800px

პირველი ელემენტიდან მოიჭრება შემდეგი ნაჭერი:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

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

400px - 57.14px = 342.86px ~ 343px

დანარჩენი თითოეული ელემენტის წონილი სიგანე უდრის:

200px * 1 = 200px

თითოეული ელემენტიდან მოიჭრება შემდეგი ნაჭერი:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

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

200px - 14.2px = 185.8px ~ 186px

Задание 1

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

Задание 2

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

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

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

Задание 3

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

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

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

Задание 4

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

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

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
  flex-shrink: 3;
}
.elem2 {
  width: 200px;
  flex-shrink: 2;
}
.elem3 {
  width: 200px;
  flex-shrink: 1;
}
.elem4 {
  width: 200px;
  flex-shrink: 1;
}