انتقل إلى محتوى الدرس
الدرس 81
دورة لغة CSS

خاصية flex-shrink مع flex في لغة CSSCSS Flex Shrink

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

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

CSS Flex Shrink خاصية flex-shrink مع flex في لغة CSS

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


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

  • number والقيمة الأفتراضية هي 1 والرقم يتم مقارنتة مع العناصر الأخري التي تستخدم خاصية flex-shrink كلما كان الرقم اكبر كلما زاد تقلص العنصر نسبة للعناصر الأخري وينكمش العنصر فقط في حالة قلت مساحة الحاوية.

CSS flex-shrink syntax

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

HTML
flex-shrink:value;

CSS flex-shrink values

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

HTML
flex-shrink:number|initial|inherit;

CSS Flex Shrink number خاصية flex-shrink مع flex والقيمة number في لغة CSS

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

CSS flex flex shrink number

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

HTML
.one
{
  flex-shrink:4;
}

CSS Flex Shrink number eight خاصية flex-shrink مع flex والقيمة number eight في لغة CSS

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

CSS Flex Shrink number eight

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

HTML
.two
{
  flex-shrink:8;
}

CSS Flex Shrink number three خاصية flex-shrink مع flex والقيمة number three في لغة CSS

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

CSS Flex Shrink number three

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

HTML
.two
{
  flex-shrink:3;
}

مشاركة

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

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