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

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

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

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

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

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


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

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

CSS order syntax

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

HTML
order:value;

CSS order values

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

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

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

HTML
.three
{
order:-1;
}

مشاركة

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

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

ابنِ لغتك البرمجية

المصطلحات8

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 8 مفهومةأول بطاقة، أول خطوة
01 Items عناصر
للمراجعة
02 Order ترتيب
للمراجعة
03 Grow نمو
للمراجعة
04 Shrink إنكماش
للمراجعة
05 Basis أساس
للمراجعة
06 Self ذاتي
للمراجعة
07 Align محاذاة
للمراجعة
08 Container حاوية المحتوي
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 3أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك
01

تستخدم الخاصية ................ في ترتيب العناصر الخاصة بك كما تريد

____
02

تستخدم الخاصية ...................في تحديد نسبة حجم كل عنصر بالنسبة للعناصر الاخري

03

تستخدم الخاصية flex-grow في تحديد نسبة حجم كل عنصر بالنسبة للعناصر الأخرى ؟

04

تحدد خاصية flex-shrink الطول الأولي للعنصر flex