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

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

flex-grow:

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

flex-shrink:

• განსაზღვრავს, რამდენად დაიკვეხნის ელემენტი, თუ ხელმისაწვდომი სივრცე ფლექს-კონტეინერში ნაკლებია ყველა ფლექს-ელემენტის ძირითადი ზომების ჯამზე.
• ნაგულისხმევია flex-shrink: 1, რაც ნიშნავს, რომ ელემენტი შეიძლება დაიკვეხნოს.
• მნიშვნელობა არის არასაკრეფი რიცხვი.
• რაც უფრო დიდია flex-shrink მნიშვნელობა, მით უფრო ძლიერად დაიკვეხნის ელემენტი სხვა ელემენტებთან შედარებით, რომლებსაც ნაკლები მნიშვნელობა აქვთ.
• სიღრმის მიხედვით, სიგანე განისაზღვრება flex-basis ან width-ით.

მაგალითი:

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

.item {
  flex-basis: 100px;
  /* თითოეული ელემენტის ძირითადი სიგანე */
}

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* ნაგულისხმევი მნიშვნელობები */
}

.item:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* არ დაიკვეხნოს */
}

.item:nth-child(3) {
  flex-grow: 0; /* არ გაიზარდოს */
  flex-shrink: 2; /* ძლიერ დაიკვეხნოს */
}

თუ ძირითადი სიგანეების ჯამი (300px) ნაკლებია კონტეინერის სიგანეზე (500px), დარჩენილი სივრცე (200px) ნაწილდება პირველ და მეორე ელემენტებს შორის flex-grow 1:2 თანაფარდობით.

თუ ძირითადი სიგანეების ჯამი მეტია კონტეინერის სიგანეზე, ელემენტები დაიკვეხნებიან მათი flex-shrink მნიშვნელობების და ძირითადი ზომების შესაბამისად. ელემენტი, რომელსაც აქვს flex-shrink: 0, არ დაიკვეხნოს.