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 أساسي.