FlexBox

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

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

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

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

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

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

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

تطبيق الخصائص

يمكنك تطبيق سمات 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 أساسي.