2018-10-12 16:35:31 -04:00
|
|
|
---
|
|
|
|
|
title: Flex-grow
|
|
|
|
|
localeTitle: فليكس النمو
|
|
|
|
|
---
|
|
|
|
|
# فليكس تنمو
|
|
|
|
|
|
|
|
|
|
الخاصية المرنة للنمو هي خاصية flexbox تسمح لك بتحديد تخصيص المساحة الخالية للحاويات داخل حاوية مرنة. يوفر حلاً لجميع تلك المساحة غير المرغوب فيها!
|
|
|
|
|
|
|
|
|
|
سيحول الحاوية من هذا
|
|
|
|
|
|
2019-05-20 22:52:16 +03:00
|
|
|
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
# **الى هذا**
|
|
|
|
|
|
2019-05-20 22:52:16 +03:00
|
|
|
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
ماذا حدث للتو؟
|
|
|
|
|
|
|
|
|
|
حسنًا ، أضفنا شيئين إلى بنية css.
|
|
|
|
|
|
|
|
|
|
HTML
|
|
|
|
|
|
2019-06-20 14:40:26 -07:00
|
|
|
```html
|
|
|
|
|
<p class = "ten">1</p>
|
|
|
|
|
<p class = "twenty">2</p>
|
|
|
|
|
```
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
CSS
|
|
|
|
|
|
2019-06-20 14:40:26 -07:00
|
|
|
```css
|
|
|
|
|
body {
|
|
|
|
|
display:flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
}
|
|
|
|
|
```
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
حدث شيئان
|
|
|
|
|
|
|
|
|
|
1. تم تحويل الحاوية الرئيسية إلى `display:flex`
|
|
|
|
|
2. بعد ذلك ، تم تخصيص "المساحة الحرة" المتبقية بين حاويات p المتبقية في حصة متساوية لأن كل منها له خاصية مرنة تنمو بنسبة 1.
|
|
|
|
|
|
|
|
|
|
ماذا يحدث إذا كان لدينا حاويات ف ذات خصائص مرنة مختلفة؟
|
|
|
|
|
|
|
|
|
|
دعونا نرى مثال.
|
|
|
|
|
|
|
|
|
|
دعونا أولا إنشاء فقرتين وتمكين العرض: فليكس.
|
|
|
|
|
|
2019-05-20 22:52:16 +03:00
|
|
|
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
لاحظ بعض الأشياء
|
|
|
|
|
|
|
|
|
|
* نظام الألوان هو لطيف
|
|
|
|
|
* هناك بعض المساحة الفارغة على يمين المربعين.
|
|
|
|
|
|
|
|
|
|
هذه المساحة الفارغة هي "المساحة الحرة" التي سيتم تخصيصها لكل من الفقرات المختلفة في وقت لاحق اعتمادًا على خصائصها المرنة.
|
|
|
|
|
|
|
|
|
|
لرؤية هذا في العمل ، دعونا نعطي أول واحد فئة من "عشرة" وخصائص مرنة تنمو من 1. دعونا أيضا إعطاء الفئة الثانية فئة "عشرين" وملكية مرنة تنمو من 2.
|
|
|
|
|
|
2019-05-20 22:52:16 +03:00
|
|
|
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
لاحظ بعض الأشياء
|
|
|
|
|
|
|
|
|
|
1. حجم الثاني ليس ضعف الحجم الأول على الرغم من امتلاكه لخاصية مرنة تنمو بمعدل ضعف القيمة الأولى.
|
|
|
|
|
2. يتم ملء المساحة بالكامل. (تم إضافة بعض الهوامش إلى الجانب لتمكينها من الظهور بشكل أكثر وضوحًا.)
|
|
|
|
|
|
|
|
|
|
كلما قمنا بتغيير حجم الشاشة ، نجد أيضًا أن الشاشة الأولى تتقلص بمعدل ضعف سرعة الثانية.
|
|
|
|
|
|
2019-05-20 22:52:16 +03:00
|
|
|
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
#### معلومات اكثر:
|
