როგორ მუშაობს flex-grow და flex-shrink თვისებები?

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

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

მაგალითი:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* კონტეინერის სიგანე */
}

.item {
  flex-basis: 100px; /* თითოეული ელემენტის საწყისი ზომა */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* დაიკავებს 1 ნაწილს თავისუფალი სივრციდან */
  flex-shrink: 0; /* არ დაიკვეხნება */
}

.item-2 {
  flex-grow: 2; /* დაიკავებს 2 ნაწილს თავისუფალი სივრციდან */
  flex-shrink: 1; /* შეიძლება დაიკვეხნას */
}

.item-3 {
  flex-grow: 1; /* დაიკავებს 1 ნაწილს თავისუფალი სივრციდან */
  flex-shrink: 1; /* შეიძლება დაიკვეხნას */
}

ამ შემთხვევაში საერთო საწყისი ზომები ელემენტების 300px-ია (3 * 100px). თავისუფალი სივრცე 100px-ია (400px - 300px). ეს თავისუფალი სივრცე განაწილდება flex-grow პროპორციით: 1 + 2 + 1 = 4. ელემენტი 1 მიიღებს 1/4 * 100px = 25px დამატებით სივრცეს. ელემენტი 2 მიიღებს 2/4 * 100px = 50px დამატებით სივრცეს. ელემენტი 3 მიიღებს 1/4 * 100px = 25px დამატებით სივრცეს.

საბოლოო ზომები იქნება: ელემენტი 1: 100px + 25px = 125px ელემენტი 2: 100px + 50px = 150px ელემენტი 3: 100px + 25px = 125px

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

საჭიროა გახსოვდეს, რომ flex-basis, flex-grow და flex-shrink ხშირად გამოიყენება ერთად როგორც მოკლე flex თვისება. მაგალითად, flex: 1 1 auto; თანაბარია flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

სივრცის განაწილების პრიორიტეტი:

1. flex-basis: განსაზღვრავს ელემენტის საწყის ზომას.
2. flex-grow: განაწილებს დადებით თავისუფალ სივრცეს.
3. flex-shrink: განაწილებს უარყოფით თავისუფალ სივრცეს (საკმაოდ შემცირება).