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

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

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

.item {
  flex-grow: 1; /* ელემენტი გამოიყენებს ყველა ხელმისაწვდომ თავისუფალ სივრცეს */
}

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

.item {
  flex-shrink: 0; /* ელემენტი არ შემცირდება */
}

თან ერთად flex-basis-თან, ისინი ქმნიან მოკლე თვისებას flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

გამოყენების მაგალითი:

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

.container {
  display: flex;
  width: 400px; /* კონტეინერის ფიქსირებული სიგრძე მაგალითი */
}

.item {
  flex-basis: 100px; /* ყველა ელემტის საწყისი ზომა */
}

.item-1 {
  flex-grow: 1; /* Item 1 გამოიყენებს თავისუფალ სივრცეს */
}

.item-2 {
  flex-shrink: 0; /* Item 2 არ შემცირდება */
}

თუ კონტეინერი სიგრძით 200px-ზე მეტია (100px + 100px), item-1 დაიკავებს დარჩენილ თავისუფალ სივრცეს. თუ უკვე 200px-ია, item-2 შეინარჩუნებს თავის საწყის ზომას 100px და item-1 შემცირდება.

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