freeCodeCamp/guide/arabic/css/layout/flexbox/flex-grow/index.md

---
title: Flex-grow
localeTitle: فليكس النمو
---
# فليكس تنمو

الخاصية المرنة للنمو هي خاصية flexbox تسمح لك بتحديد تخصيص المساحة الخالية للحاويات داخل حاوية مرنة. يوفر حلاً لجميع تلك المساحة غير المرغوب فيها!

سيحول الحاوية من هذا

![](https://i.imgur.com/lFJaBUfh.png)

# **الى هذا**

![](https://i.imgur.com/4X8ITZih.png)

ماذا حدث للتو؟

حسنًا ، أضفنا شيئين إلى بنية css.

HTML

 `
<p class = "ten">1</p> 
 <p class = "twenty">2</p> 
` 

CSS

 `body { 
  display:flex; 
 } 
 
 p { 
  flex-grow: 1; 
 } 
` 

حدث شيئان

1.  تم تحويل الحاوية الرئيسية إلى `display:flex`
2.  بعد ذلك ، تم تخصيص "المساحة الحرة" المتبقية بين حاويات p المتبقية في حصة متساوية لأن كل منها له خاصية مرنة تنمو بنسبة 1.

ماذا يحدث إذا كان لدينا حاويات ف ذات خصائص مرنة مختلفة؟

دعونا نرى مثال.

دعونا أولا إنشاء فقرتين وتمكين العرض: فليكس.

![](https://i.imgur.com/wPqUgsih.png)

لاحظ بعض الأشياء

*   نظام الألوان هو لطيف
*   هناك بعض المساحة الفارغة على يمين المربعين.

هذه المساحة الفارغة هي "المساحة الحرة" التي سيتم تخصيصها لكل من الفقرات المختلفة في وقت لاحق اعتمادًا على خصائصها المرنة.

لرؤية هذا في العمل ، دعونا نعطي أول واحد فئة من "عشرة" وخصائص مرنة تنمو من 1. دعونا أيضا إعطاء الفئة الثانية فئة "عشرين" وملكية مرنة تنمو من 2.

![](https://i.imgur.com/7n0V1G4h.png)

لاحظ بعض الأشياء

1.  حجم الثاني ليس ضعف الحجم الأول على الرغم من امتلاكه لخاصية مرنة تنمو بمعدل ضعف القيمة الأولى.
2.  يتم ملء المساحة بالكامل. (تم إضافة بعض الهوامش إلى الجانب لتمكينها من الظهور بشكل أكثر وضوحًا.)

كلما قمنا بتغيير حجم الشاشة ، نجد أيضًا أن الشاشة الأولى تتقلص بمعدل ضعف سرعة الثانية.

![](https://i.imgur.com/pa4grM8h.png)

#### معلومات اكثر: