التخطيط بالـ Flexbox لتنظيم العناصر

كم مرة أهدرت نصف ساعة كاملة لمجرد وضع عنصر في منتصف الصفحة بالضبط؟ أو حاربت لتنسيق قائمة التنقل بحيث تصبح المسافات بين أزرارها متساوية؟ لست وحدك؛ هذا الصداع عانى منه مصممو الويب لسنوات طويلة، حتى ظهر نظام Flexbox وأنهى تلك المأساة بضربة واحدة.

يمنحك نظام الصندوق المرن (Flexible Box Layout) حلاً ذكياً يريحك من تعقيدات المحاذاة والتوزيع، حتى عندما تكون أبعاد العناصر مجهولة أو تتغير باستمرار. أسطر قليلة من الكود كفيلة بتحويل أعقد التصاميم إلى انسيابية مطلقة.

الفكرة الأساسية: الحاوية والعناصر

لفهم المنطق وراء Flexbox، تخيل صينية تقديم (وهي الحاوية Flex Container) تحوي مجموعة كؤوس (العناصر Flex Items). السحر هنا أنك لا تُوجّه كل كأس بمفرده، بل تعطي الأوامر للصينية نفسها، وهي تتكفل بترتيب كل ما فوقها.

بمجرد إضافة سطر display: flex للحاوية، يتغير كل شيء؛ إذ تخلع العناصر المباشرة سلوكها القديم والعنيد، وتبدأ بالتصرف بمرونة كاملة وفق القواعد الجديدة.

سر المحاور: كيف يفكر Flexbox؟

يعتمد هذا النظام على محورين وهميين، وفهمهما هو المفتاح الحقيقي للتحكم الكامل:

• المحور الرئيسي (Main Axis): الخط الذي تتمدد عليه العناصر، ويكون أفقياً بوضع افتراضي (من اليمين إلى اليسار في الواجهات العربية).
• المحور التقاطعي (Cross Axis): الخط العمودي على المحور الرئيسي، وهو المسؤول عن ضبط الارتفاع والمحاذاة الرأسية.

لماذا يهمنا هذا؟ لأن Flexbox لا يستوعب مصطلحات مثل “أعلى أو أسفل”، بل يفهم فقط موقع العناصر بالنسبة لهذين المحورين.

أدوات التحكم في الحاوية (Flex Container)

يقدم لك النظام مجموعة خصائص قوية للسيطرة على التخطيط:

1. تحديد اتجاه التدفق (flex-direction)

تحدد هذه الخاصية مسار المحور الرئيسي. تصفّ العناصر بجانب بعضها أفقياً مع القيمة الافتراضية row، أو تجعلها تتراص عمودياً باستعمال column. وإن أردت قلب الترتيب تماماً دون مساس بملف HTML، استعن بـ row-reverse أو column-reverse.

2. المحاذاة على المحور الرئيسي (justify-content)

الأداة الأهم لتوزيع المساحات بين العناصر عبر المسار الرئيسي:

• flex-start: يجمع العناصر عند بداية المحور.
• center: يكتل العناصر في المنتصف تماماً.
• space-between: يلصق العنصر الأول بالبداية والأخير بالنهاية، ويوزع المساحة المتبقية بالتساوي بين البقية.
• space-around: يمنح كل عنصر مساحة فارغة متساوية على جانبيه.

3. المحاذاة على المحور التقاطعي (align-items)

تمنحك السيطرة على المحاذاة العمودية. جرب القيمة center لتوسيط العناصر رأسياً، أو stretch لتمطها حتى تملأ ارتفاع الحاوية، أو flex-start لمحاذاتها للأعلى.

4. التعامل مع المساحات الضيقة (flex-wrap)

يميل Flexbox بطبعه إلى حشر جميع العناصر في سطر واحد مهما ضاقت الشاشة. لتفادي هذا الانكماش، أضف الخاصية flex-wrap: wrap لتقفز العناصر إلى سطر جديد فور نفاد المساحة.

التحكم في العناصر المنفردة (Flex Items)

رغم سلطة الحاوية المطلقة، يحتفظ كل عنصر بهامش من الحرية. يمكنك تعديل سلوك عنصر معين بخصائص مثل:

• flex-grow: تحدد مقدرة العنصر على التمدد لابتلاع المساحة الفارغة. قيمتها الافتراضية 0، لكن إعطاءها الرقم 1 يجبر العنصر على التوسع وتغطية أي فراغ متاح.
• align-self: تُتيح لعنصر واحد التمرد على قواعد المحاذاة الجماعية المحددة بـ align-items.
• order: تغير ترتيب ظهور العنصر بصرياً دون المساس بموقعه في كود HTML؛ الرقم الأكبر يظهر دائماً في الأخير.

تطبيق عملي: حل المعضلة التاريخية للتوسيط

لتدرك قوة النظام، افترض أنك تريد تثبيت بطاقة في منتصف الشاشة تماماً أفقياً ورأسياً. في الماضي، كان هذا ينطوي على معادلات وحيل معقدة. أما اليوم، فالأمر يكتمل بثلاثة أسطر فقط:

تفعّل النظام بـ display: flex، ثم تضع justify-content: center لتوسيط البطاقة أفقياً، وتلحقها بـ align-items: center للتوسيط الرأسي. انتهت المهمة في لحظات وبدقة متناهية.

تحدٍّ سريع لنقل الفكرة إلى الواقع

الاستيعاب الحقيقي لـ Flexbox يكتمل بالتجربة المباشرة والعمل اليدوي.

تمرين عملي: ابْنِ شريط ملاحة علوياً (Navigation Bar). اجعل الشعار يلتصق باليمين، وروابط الصفحات تتوسط الشريط، وزر “تسجيل الدخول” في أقصى اليسار. استخدم الحاوية المرنة مع justify-content: space-between وراقب كيف يكتمل التنسيق بأسلوب سلس!