FlexBox

FlexBox هي حاوية تعرض العناصر في اتجاه واحد. ويمكنه تغيير الحجم والتفاف المحتوى ومحاذاته وتوزيع المساحة بين العناصر لملء المساحة المتاحة بأفضل شكل ممكن. وهو تصميم مفيد للعناصر ذات الأحجام المختلفة ولتغيير حجم العناصر عند تغيُّر المساحة المتاحة.

باستخدام FlexBox، يمكنك إجراء ما يلي:

  • التحكّم في طريقة تكبير وتصغير العناصر لملء المساحة المتاحة
  • لفّ العناصر إلى صفوف أو أعمدة جديدة عندما لا تتوفّر مساحة كافية لها
  • توزيع المساحة الإضافية بين العناصر باستخدام إعدادات مسبقة ملائمة

حالات استخدام FlexBox

يُستخدم FlexBox عادةً لعرض عدد صغير من العناصر ضمن تخطيط شاشة شامل. بالنسبة إلى تخطيط الشاشة بشكل عام، يكون Grid خيارًا أفضل عادةً. لا يتيح FlexBox التحميل الكسول للعناصر. لعرض أعداد كبيرة من العناصر، استخدِم القوائم والشبكات الكسولة. إذا كنت بحاجة إلى تضمين عناصر، استخدِم FlexBox بدلاً من FlowRow وFlowColumn.

المصطلحات والمفاهيم

تعرض FlexBox عناصرها في صفوف أفقية أو عمودية. يحدّد اتجاه هذه الخطوط المحور الرئيسي. ويُطلق على الاتجاه العمودي على المحور الرئيسي اسم المحور المتقاطع. يُعرف طول FlexBox على طول المحور الرئيسي باسم الحجم الرئيسي. يُعرف طول المحور العرضي المقابل باسم الحجم العرضي. تشكّل هذه الأحجام والمحاور أساس سلوك FlexBox.

FlexBox مع محور رئيسي أفقي ومحور متقاطع عمودي
الشكل 1. المحاور والأحجام عندما يكون الاتجاه FlexBox هو Row
FlexBox مع محور رئيسي عمودي ومحور عرضي أفقي
الشكل 2. المحاور والأحجام عندما يكون الاتجاه FlexBox هو Column

تطبيق المواقع

يمكنك تطبيق سمات FlexBox بطريقتَين:

  • إلى حاوية FlexBox باستخدام FlexBox(config)
  • إلى عنصر داخل FlexBox باستخدام Modifier.flex

سمات الحاوية (config)

خصائص المنتج (Modifier.flex)
  • ‫direction: اتجاه تخطيط العنصر
  • wrap: لتحديد ما إذا كان سيتم تضمين العناصر إذا كان الحجم الرئيسي غير كافٍ
  • ‫justifyContent - كيفية توزيع العناصر على طول المحور الرئيسي
  • alignItems - كيفية محاذاة العناصر على طول المحور المتقاطع
  • alignContent - كيفية توزيع المساحة الإضافية من الحجم المتقاطع عند توفّر أسطر متعدّدة
  • rowGap / columnGap: لإضافة مسافة بين العناصر والأسطر

اطّلِع على ضبط سلوك الحاوية للحصول على مزيد من المعلومات حول هذه السمات.
  • basis: حجم العنصر قبل توزيع أي مساحة إضافية من الحجم الرئيسي
  • ‫grow: نسبة المساحة الإضافية من الحجم الرئيسي التي يجب أن يحصل عليها هذا العنصر
  • shrink: حصة المساحة غير المتوفّرة من المقاس الرئيسي التي يجب أن تتلقّاها هذه السلعة
  • ‫alignSelf: كيفية توزيع المساحة الإضافية من الحجم المتقاطع على هذا العنصر، ويتجاوز alignItems
  • order: يتحكّم في ترتيب التصميم

اطّلِع على ضبط سلوك العنصر للحصول على مزيد من المعلومات حول هذه السمات.

فهم خوارزمية التنسيق FlexBox

إحدى أقوى ميزات FlexBox هي قدرته على تغيير حجم العناصر التابعة له بما يتناسب مع المساحة المتاحة له. يمكن أن يساعدك فهم طريقة عمل FlexBox في ضبط خصائص FlexBox لتحسين واجهة المستخدم لجميع الأحجام الممكنة.

تعمل خوارزمية التنسيق في FlexBox بالطريقة التالية:

  1. احتساب الحجم الأساسي للعنصر الفرعي: استخدِم قيمة basis الخاصة بالعنصر الفرعي لاحتساب حجمه الأوّلي على طول المحور الرئيسي قبل توزيع أي مساحة إضافية.

  2. ترتيب العناصر الفرعية: رتِّب العناصر الفرعية حسب قيم order، إذا كانت متوفّرة.

  3. إنشاء أسطر: لكل عنصر فرعي، تحقَّق مما إذا كان حجمه الأولي بالإضافة إلى gap سيتناسب مع المساحة المتبقية في السطر الحالي. في هذه الحالة، ضَع هذا الطفل في الصف. إذا لم يكن الأمر كذلك، ضَع العنصر في سطر جديد في حال تفعيل الالتفاف، أو ضَع العنصر في السطر الحالي حيث سيتجاوز الحجم المسموح به (سيتم إخفاء جزء منه عند حافة الحاوية).

  4. محاذاة العناصر أو تغيير حجمها في المحور الرئيسي: لكل سطر، وزِّع المساحة الإضافية على العناصر أو بينها من خلال تغيير حجمها أو محاذاتها.

  5. محاذاة العناصر أو تغيير حجمها على المحور العمودي: لكل سطر، وزِّع المساحة الإضافية على العناصر والأسطر أو بينها من خلال توسيعها أو محاذاتها.

بعد أن أصبحت على دراية بمفاهيم FlexBox، اطّلِع على البدء لمعرفة كيفية إنشاء FlexBox أساسي.