Πώς λειτουργούν τα flex-grow, flex-shrink και flex-basis;

Question

Accepted Answer

Αυτές οι τρεις ιδιότητες σε **flex items** ελέγχουν πώς μοιράζονται τον χώρο κατά μήκος του κύριου άξονα. Η συντομογραφία `flex` τα συνδυάζει.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## Κάθε ιδιότητα εξηγημένη

- **`flex-basis`** — το ιδανικό/αρχικό μέγεθος του στοιχείου στον κύριο άξονα (όπως `width` για μια σειρά). `auto` χρησιμοποιεί το μέγεθος του περιεχομένου.
- **`flex-grow`** — εάν υπάρχει *επιπλέον* χώρος, πόσο άπληστα επεκτείνεται αυτό το στοιχείο. `0` = μην αναπτύσσεστε; υψηλότεροι αριθμοί αναπτύσσονται ανάλογα.
- **`flex-shrink`** — εάν *δεν υπάρχει* αρκετός χώρος, πόσο έτοιμα συρρικνώνεται αυτό το στοιχείο. `0` = ποτέ μην συρρικνώνεστε (μπορεί να προκαλέσει υπερχείλιση); προεπιλογή `1` = συρρικνώνεται ως απαιτείται.

## Αναπτυσσόμενο ανάλογα

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

Ο επιπλέον χώρος διαιρείται στην αναλογία των τιμών ανάπτυξης, όχι των απόλυτων μεγεθών.

## Κοινές τιμές συντομογραφίας

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` σε κάθε στοιχείο δημιουργεί ίσες στήλες. `flex: 0 0 250px` δημιουργεί ένα άκαμπτο σταθερού πλάτους πάνελ δίπλα σε ένα ευέλικτο.

## Μια πραγματική διάταξη: σταθερή πλευρική γραμμή + ρευστό περιεχόμενο

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## Γιατί έχει σημασία

Αυτές οι ιδιότητες είναι ο τρόπος με τον οποίο ελέγχετε το ανάλογο μέγεθος στις διατάξεις flex — ίσες στήλες (`flex: 1`), σταθερές συν ρευστές πάνελ (`flex: 0 0 X` + `flex: 1`) και αποφυγή ανεπιθύμητης συρρίκνωσης (`flex-shrink: 0`).

Η κατανόηση του basis/grow/shrink μετατρέπει το Flexbox από "τα στοιχεία κάθονται εκεί" σε ακριβή, ανταποκρινόμενο έλεγχο.