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

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

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

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

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.

HTML
flex-basis:value;

CSS flex-basis values

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

HTML
flex-basis:number|auto|initial|inherit;

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.

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

HTML
.five
{
    flex-basis:auto;
}

مشاركة

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

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