CSS

CSS Flex Basis
خاصية flex-basis مع flex box في لغة CSS

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

التاريخ

07 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1048

المواضيع

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

CSS Flex Basis
خاصية flex-basis مع flex box في لغة CSS

</> CSS Flex Basis
خاصية flex-basis مع flex box في لغة CSS

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


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

  • number وحدة الامتداد, وتكون عادة نسبة مئوية أو بوحدة البيكسل لتحدد حجم مبدئي لعناصر حاوية flex box.
  • auto وهي القيمة الأفتراضية. وحجم الأمتداد المبدئي يساوي حجم الأمتداد المبدئية لبقية عناصر الحاوية بدون حجم ثابت ويعتمد علي المحتوي الداخلي للعنصر.
CSS flex-basis syntax

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

flex-basis:value;
CSS flex-basis values

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

flex-basis:number|auto|initial|inherit;
هام
إذا لم يكن العنصر هو عنصر flex box item فان خاصية flex-basis قد لا تؤثر علي العنصر ولا تعمل مطلقاً في لغة CSS.

</> CSS Flex Basis number
خاصية flex-basis مع القيمة number في لغة CSS

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

CSS Flex Basis number

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

.five
{
    flex-basis:250px;
}

</> CSS Flex Basis auto
خاصية flex-basis مع القيمة auto في لغة CSS

تستخدم خاصية flex-basis مع flex items بداخل حاوية flex box في لغة CSS مع القيمة auto وهي القيمة الأفتراضية. وحجم الأمتداد المبدئي يساوي حجم الأمتداد المبدئية لبقية عناصر الحاوية بدون حجم ثابت ويعتمد علي المحتوي الداخلي للعنصر.

CSS Flex Basis auto

خاصية flex-basis مع القيمة auto في لغة CSS.

.five
{
    flex-basis:auto;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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