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