خاصية Flex Grow
آخر تحديث: 2026-09-13
flex-grow خاصية Flex Grow
تضبط الخاصية flex-grow معامل نمو عنصر flex. تقرر مقدار الفضاء المتبقي في الحاوية الذي يمكن للعنصر أن يأخذه. القيمة الافتراضية هي 0، أي لا ينمو العنصر ويحتفظ بحجمه الأصلي. القيم الأكبر تعطي العنصر نصيبًا أكبر: يُوزَّع الفضاء المتبقي بين جميع العناصر بالتناسب مع قيم flex-grow الخاصة بها.
| الفئة | |
|---|---|
| القيمة الأولية | 0 |
| موروث | لا |
| ينطبق على | عناصر flex |
| نوع الحركة | number |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
flex-grow: <number>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<number> | النوع | معامل النمو؛ 0 يعني أن العنصر لا ينمو. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-grow | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： flex-grow نسبة بلا وحدة ولا تقبل قيمًا سالبة. يُقسم الفضاء المتبقي حسب نسبة قيم flex-grow، فمثلًا 1:2:3 توزّع الفضاء على 1/6 و 2/6 و 3/6.
تحذير： لا يؤثر flex-grow إلا عندما يكون للحاوية فضاء متبقٍ. إذا كانت العناصر تملأ عرض الحاوية بالفعل، فلن يقلّصها flex-grow؛ استخدم flex-shrink لذلك.
❓ الأسئلة الشائعة
Qهل يمكن أن يكون flex-grow عددًا عشريًا؟
Aنعم. يقبل flex-grow أي عدد غير سالب بما في ذلك الكسور العشرية، فـ flex-grow: 0.5 صالح. يُقسم الفضاء المتبقي حسب النسبة النسبية لجميع قيم flex-grow، مما يعني أن تركيبة 0.5 و 1 تتصرف تمامًا مثل 1 و 2؛ المهم هو النسبة فقط. والكسور الصغيرة مثل 0.5 أو 0.3 مفيدة عندما تريد أن ينمو العنصر قليلًا دون أن يتضاعف حجمه.
Qلماذا لا ينمو عنصري رغم أنني ضبطت flex-grow؟
Aأسباب شائعة: الحاوية لا تملك فضاءً متبقٍ لأن العناصر تملأ العرض بالكامل، أو نسي الأب ضبط display: flex، أو flex-basis مضبوط auto وال content دفع الحجم الأساسي لأقصاه. أولًا تحقق مما إذا كانت الحاوية أعرض من مجموع عرض العناصر، ثم راجع flex-basis: لكي يتولى flex-grow التوزيع بالكامل، يُضبط عادةً flex-basis إلى 0.
Qماذا يعني "flex-grow يوزّع الفضاء المتبقي، لا العرض الكامل"؟
Aيُرتّب flex أولًا كل عنصر حسب flex-basis الذي افتراضيًا auto، أي عرض المحتوى. ما يتبقّى هو الفضاء المتبقي، ولا يُقسَّم بالتناسب عبر flex-grow سواه. فحاوية عرضها 600px ومحتوى عناصرها الثلاثة 300px، لا يُوزَّع سوى 300px المتبقية. لذا مع flex-basis الافتراضي، لا ينتج عن flex-grow: 1 عناصر متساوية العرض ما لم يُضبط flex-basis إلى 0.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
اختصار Flex
اختصار لـ flex-grow و flex-shrink و flex-basis.
Flex Shrink
يتحكم في مقدار تقلّص عنصر flex.
