CSS Flex Shrink
خاصية flex-shrink مع flex في لغة CSS
سوف تتعلم في هذا الدرس خاصية flex-shrink في لغة CSS ووظيفيتها وكيفية إستخدامها مع عناصر حاوية flex box وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
هام
</>
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; }