انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: خاصية order مع Flexbox في لغة CSS

Flex Order Negative Integers تقديم العناصر بقيم order السالبة

تعرّف على خاصية order في التخطيط المرن Flexbox لإعادة ترتيب ظهور العناصر بصرياً بالأعداد السالبة والصفرية والموجبة مع مراعاة سلامة تنقل مفتاح Tab وقارئات الشاشة وفق شجرة HTML.
4 صفوف تعليمية
لغة CSS
4,428 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

افترض أنك تريد إبراز باقة اشتراك مميزة أو بطاقة تنبيه لتظهر في مقدمة السطر قبل جميع أقرانها دون أن تضطر لترقيم بقية البطاقات يدوياً. يكفي إعطاء تلك البطاقة وحدها قيمة سالبة مثل order: -1 لتسبق جميع العناصر الافتراضية ذات القيمة 0 فوراً.

جرّب التقديم بالسالب والتأخير بالموجب عملياً في المختبر التفاعلي والمثال القابل للتشغيل أدناه:

الصف 2 معاينة حية
الصف 3 كود برمجي
CSS 
.plans-row {
  display: flex;
  gap: 12px;
}
.plan-featured {
  order: -1;
}
جرّب بنفسك
الصف 4 ملاحظة هامة

جميع فقرات هذا الدرس (خاصية order مع Flexbox في لغة CSS)