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