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

جربها بنفسك

CSS flex flex grow number fifty fifty

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

.two
{
  flex-grow:1;
}

.three
{
  flex-grow:1;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Flex Grow CSS