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

Flex Order Positive Integers تأخير العناصر بقيم order الموجبة

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

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

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

يؤدي منح أحد الأبناء عدداً صحيحاً موجباً مثل order: 1 أو order: 2 إلى دفعه نحو نهاية المحور الرئيسي. قد يتساءل المبتدئ لماذا نقلت القيمة 1 العنصر إلى المؤخرة بدلاً من المقدمة؟ الجواب البسيط أن بقية أقرانه لم تُعدَّل فاحتفظت بقيمتها الافتراضية 0، والصفر يسبق الواحد حسابياً.

تأمل المخطط البصري والمثال القابل للتشغيل أدناه، حيث انتقل العنصر الأول في الكود إلى آخر الصف فور إعطائه order: 1:

الصف 2 صورة توضيحية
مخطط يوضح فرز عناصر Flexbox تصاعدياً من القيمة السالبة -1 إلى الافتراضية 0 ثم الموجبة 1
الصف 3 كود برمجي
CSS 
.row-cards {
  display: flex;
  gap: 10px;
}
.sponsor-card {
  order: 1;
}
جرّب بنفسك
الصف 4 ملاحظة هامة

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