انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 80
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,096
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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.

HTML 
flex-grow:value;

CSS flex-grow values

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

HTML 
flex-grow:number|initial|inherit;

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.

HTML 
.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.

HTML 
.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.

HTML 
.two
{
  flex-grow:1;
}

.three
{
  flex-grow:1;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…