72 lines
2.5 KiB
Markdown
72 lines
2.5 KiB
Markdown
|
---
|
||
|
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)
|
||
|
|
||
|
#### معلومات اكثر:
|