როგორ შეიძლება მოქნილი გზით შეცვალოთ flexbox-ით გამოყენებული ელემენტების ზომები?

Flexbox-ის ელემენტების ზომების მოქნილი ცვლილება შესაძლებელია flex-grow, flex-shrink და flex-basis თვისებებით.

• flex-grow: განსაზღვრავს, რამდენად შეიძლება ელემენტი გაიზარდოს, იყენებს თავისუფალ სივრცეს კონტეინერში. მნიშვნელობა default-ით არის 0 (არ გაიზრდება). უფრო მაღალი მნიშვნელობა ნიშნავს უფრო დიდ გაზრდის კოეფიციენტს სხვა ელემენტებთან შედარებით.
• flex-shrink: განსაზღვრავს, რამდენად შეიძლება ელემენტი დაიკვეხნოს, როდესაც თავისუფალი სივრცე ნაკლებია. მნიშვნელობა default-ით არის 1 (დაიკვეხნება). უფრო მაღალი მნიშვნელობა ნიშნავს უფრო დიდ კვეხნის კოეფიციენტს.
• flex-basis: განსაზღვრავს ელემენტის საწყის ზომას, სანამ თავისუფალი სივრცე გაიყოფა. შეიძლება იყოს ფიქსირებული მნიშვნელობა (px, %, rem) ან საკვანძო სიტყვა (auto, content).

ეს სამი თვისება ხშირად გამოიყენება მოკლედ flex თვისებით: flex: <flex-grow> <flex-shrink> <flex-basis>;.

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

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

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

/* ელემენტს აქვს საწყისი ზომა 100px, და შემდეგ იზრდება თუ ადგილი არის */
.flex-item {
  flex: 1 1 100px;
}

/* ელემენტს აქვს საწყისი ზომა, განსაზღვრული მისი შიგთავსით, და შეიძლება დაიკვეხნას */
.flex-item {
  flex: 0 1 auto; /* ტოლია `initial`-ს */
}

/* ელემენტი არ იზრდება, არ იკვეხნება და აქვს საწყისი ზომა, განსაზღვრული მისი შიგთავსით */
.flex-item {
  flex: 0 0 auto; /* ტოლია `none`-ს */
}

/* ელემენტი იზრდება, იკვეხნება და აქვს საწყისი ზომა 0 (სწორედ ერთნაირი სიგანის ელემენტების შექმნისთვის) */
.flex-item {
  flex: 1 1 0; /* ტოლია `auto`-ს */
}

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