كيف تعمل خصائص flex-grow و flex-shrink و flex-basis؟

Question

Accepted Answer

هذه الثلاث خصائص على **عناصر المرونة** تتحكم في كيفية مشاركة المساحة على طول المحور الرئيسي. يجمع الاختصار `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: 1`)، لوحات ثابتة وسائلة (`flex: 0 0 X` + `flex: 1`)، ومنع التقلص غير المرغوب (`flex-shrink: 0`).

فهم basis/grow/shrink يحول Flexbox من "العناصر تجلس هناك فقط" إلى تحكم دقيق وسريع الاستجابة.