CSS

CSS Flex Grow
خاصية flex-grow مع flex في لغة CSS

سوف تتعلم في هذا الدرس خاصية flex-grow في لغة CSS ووظيفيتها وكيفية إستخدامها مع عناصر حاوية flex box وجميع القيم الخاصة بها.

التاريخ

07 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

790

المواضيع

24
الشروحات chevron_left CSS Flex Grow chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Flex Grow
خاصية flex-grow مع flex في لغة CSS

</> CSS Flex Grow
خاصية flex-grow مع flex في لغة CSS

تستخدم خاصية flex-grow مع العناصر الداخلية لحاوية flex box في لغة CSS لتحديد زيادة العنصر مقارنة بالعناصر الأخري داخل الحاوية وملئ المساحة المتبقية.

قيم خاصية flex-grow في لغة CSS:

  • number و القيمة الأفتراضية هي صفر ويمكن إستخدام قيم سالبة والرقم يتم مقارنتة مع العناصر الأخري التي تستخدم خاصية flex-grow سوف ينمو العنصر في حا له مساحة متبقية من حاوية فليكس بوكس.


توضيح: اذا كانت الحاوية بها ثلاث عناصر وعنصران منهم لهم flex-grow أحدهم قيمتة هي 1 والأخر قيمتة 2 فأن المساحة المتبقية من الحاوية تكون ثلثين الي ثلث فتقسم المساحة عليهم بهذا المقدار وإذا كانت القيمة متساوية فان المساحة المتبقية تتقسم عليهم بالتساوي.

CSS flex-grow syntax

طريقة كتابة خاصية flex-grow في لغة CSS.

flex-grow:value;
CSS flex-grow values

قيم خاصية flex-grow في لغة CSS.

flex-grow:number|initial|inherit;
هام
لا تعمل خاصية flex-grow إذا لم يكن للعنصر مساحة للنمو دخل حاوية flex-box في لغة CSS.

</> CSS flex flex grow number full remaining
خاصية flex-grow مع flex والقيمة number وملئ المساحة المتبقية في لغة CSS

تستخدم خاصية flex-grow مع flex items بداخل حاوية flex box في لغة CSS مع القيمة number لعنصر واحد فقط ليشغل جميع المساحة المتبقية من مساحة حاوية flex box.

CSS flex flex grow number full

خاصية flex-grow مع القيمة number في لغة CSS.

.four
{
order:1;
}

</> CSS flex flex grow number third two third
خاصية flex-grow مع flex والقيمة number ثلث وثلثين المساحة المتبقية في لغة CSS

تستخدم خاصية flex-grow مع flex items بداخل حاوية flex box في لغة CSS مع القيمة number لعنصرين ليتم تقسيم المساحة المتبقية علي عنصرين بنسبة ثلث الي ثلثين إذا كانت قمية flex-grow ضعف قمية flex-grow للعنصر الأخر.

CSS flex flex grow number third two third

خاصية flex-grow مع القيمة number في لغة CSS.

.two
{
  flex-grow:1;
}

.three
{
  flex-grow:2;
}

</> CSS flex flex grow number fifty fifty
خاصية flex-grow مع flex والقيمة number مناصفة في لغة CSS

تستخدم خاصية flex-grow مع flex items بداخل حاوية flex box في لغة CSS مع القيمة number لعنصرين ليتم تقسيم المساحة المتبقية علي عنصرين بنسبة ثلث الي ثلثين إذا كانت قمية flex-grow ضعف قمية flex-grow للعنصر الأخر.

CSS flex flex grow number fifty fifty

خاصية flex-grow مع القيمة number في لغة CSS.

.two
{
  flex-grow:1;
}

.three
{
  flex-grow:1;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.