59. خاصية عنصر Flex: flex-grow

تحدد flex-grow قدرة عنصر flex على النمو إذا لزم الأمر، لملء المساحة المتبقية في الحاوية على طول المحور الرئيسي.

كيف يعمل Flex Grow

• تأخذ flex-grow رقماً بدون وحدة (نسبة). الافتراضي هو 0 (لن تنمو العناصر خارج حجم محتواها).
• تحدد النسبة كيفية تقسيم المساحة الحرة بين العناصر النامية.

المثال 1: نمو متساوٍ

إذا كان لديك 100 بكسل من المساحة الإضافية، وكان لعنصرين flex-grow: 1 :

css .item { flex-grow: 1; } /* يأخذ كل عنصر 50 بكسل من المساحة المتاحة */

المثال 2: نمو غير متساوٍ

إذا كان العنصر A لديه flex-grow: 1 والعنصر B لديه flex-grow: 2 :

css .item-a { flex-grow: 1; /* يأخذ 1/3 من المساحة الإضافية */ }

.item-b { flex-grow: 2; /* يأخذ 2/3 من المساحة الإضافية */ }

ملاحظة: توزع flex-grow فقط المساحة الحرة الإيجابية (عندما تكون الحاوية أكبر من الحجم الإجمالي لعناصرها). إذا كانت العناصر تتجاوز بالفعل الحاوية، فإن flex-grow لا تفعل شيئاً.