CSS

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

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

التاريخ

07 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1043

المواضيع

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

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

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

flex-shrink:value;
CSS flex-shrink values

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

flex-shrink:number|initial|inherit;
هام
يتم إنكماش أو تقليص العنصر الزي له قيمة أعلي بداخل خاصية flex-shrink في حال كان عرض الحاوية أصغر من مجموع عرض العناصر جميعا ففي هذة الحالة سوف ينكمش العنصر.

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

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

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

.two
{
  flex-shrink:3;
}
هام
لاحظ عرض الحاوية وهو 400px وعرض كل عنصر هو 200px ومجموع عرض العناصر هو 1000px سوف تتقلص مساحة العنصر الثاني الزي له قيمة 3 في خاصية flex-box ثلث عرض العناصر الأخري لان لا يوجد مساحة داخل الحاوية كافية.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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