CSS

CSS Flex Order
خاصية order مع flex في لغة CSS

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

التاريخ

30 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2056

المواضيع

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

CSS Flex Order
خاصية order مع flex في لغة CSS

</> CSS Flex Order
خاصية order مع flex في لغة CSS

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


قيم خاصية order في لغة CSS:

  • number و القيمة الأفتراضية هي صفر ويمكن تغيير الرقم كلما كان رقم القيمة أصغر كلما سبق كان ترتيب العنصر في بداية الحاوية.
CSS order syntax

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

order:value;
CSS order values

قيم خاصية order في لغة CSS.

order:number|initial|inherit;

</> CSS flex order number
خاصية order مع flex والقيمة number في لغة CSS

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

CSS flex order number

خاصية order مع القيمة number في لغة CSS.

.four
{
order:1;
}

</> CSS flex order minus number
خاصية order مع flex والقيمة minus number في لغة CSS

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

CSS flex order minus number

خاصية order مع القيمة minus number في لغة CSS.

.three
{
order:-1;
}
هام
تقبل خاصية order في لغة CSS أرقام سالبية minus numbers لتقديم عنصر قبل عنصر أخري علي حسب إتجاه الحاوية من اليسار إلي اليمين أو اليمين إلي اليسار.
مصطلحات الدرس
Items
Items

عناصر

Order
Order

ترتيب

Grow
Grow

نمو

Shrink
Shrink

إنكماش

Basis
Basis

أساس

Self
Self

ذاتي

Align
Align

محاذاة

Container
Container

حاوية المحتوي

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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