بتطور تقنيات الويب و تطوير الواجهات سواء من حيث التفاعلات البصرية (UI/UX) او من حيث برمجة و تحقيق هذا التفاعل في صفحة ويب حية عن طريق تقنيات الـ Front End أصبح من اللازم على كل مطور مواكبة هذه التطورات، فتقنيات الويب كالـ HTML, CSS, Javascript قد غيرت وقع أحداثها و لم تعد تلك اللغات الساكنة ذات مستقبل محدود التي يمكنك تعلمها في ظرف سويعات، بل التعمق فيها الآن يتطلب أشهراً و أياماً من الممارسة الفعلية لها.
الـ Flexbox :
من خلال إسم هذه الخاصية (Flexbox) يمكنك ان تستنبط انها تتحدث عن المرونة بشكل أساسي، تسمح لك الـ Flexbox بتحديد حاوية (Container) من خلال خاصية display : flex ، بعدها تستطيع التلاعب بمرونة بكل العناصر الموجودة في هذه الحاوية مثل تحديد شكل ظهور العناصر ( بشكل أفقي او عمودي ) تحديد حجم كل عنصر، تغيير أماكن العناصر بسهولة …، الجميل في الـ Flexbox أنك لا تحسب حساب التجاوب (Responsiveness) لتلك الحاوية، قد تحتاج الى بعض التعديلات في كل من الـ margin و الـ padding فقط من أجل إظهارها بشكل أكثر إحترافية، لكن إطمئن من حيث التداخل او من حيث البعثرة في العناصر
متى و أين يمكن إستخدام الـ Flexbox ؟
يمكن إستخدام الـ Flexbox في كل شيئ تقريبا، يمكنك إستخدامه في الـ Navbar من أجل بناء قائمة علوية سواء افقية او عمودية متساوية و إحترافية و أيضا متجاوبة، يمكن إستخدامها في صناعة قوائم جانبية (Sidebars) او صناعة سلايدر حتى و الكثير، كما يمكنها ان تقوم بترتيب اي مجموعة عناصر داخل تقسيم معين (Div) بالشكل الذي تريده، يكفي ان تعطي للـ Div خاصية display : flex و لك الحرية في التحكم في كل الخصائص.
إن الخواص التي يجلبها الـ Flexbox تسمح لك بإستخدامه في أي عنصر، لكن إن اردت جعل الصفحة كاملة عبارة عن Flex فتتعقد الأمور، و قد لا يكون الـ Flexbox أفضل خيار لك في هذه الحالة، لذلك ابقِ إستخدامك للـ Flex في إطار عناصر الويب فقط لا الصفحة، يمكنك إستخدام الـ Flex في أزيد من عنصر، بل حتى انه يمكنك إستخدام Flexbox وسط Flexbox آخر، و إن كانت الأمور ستصبح نوعا ما متلخبطة، لكن هذه الإمكانية غير مستبعدة.
كيف تستخدم الـ Flexbox ؟
الـ Flexbox يجعل من اي عناصر وسط حاوية مرنة بإستخدام عدة خصائص، في هذا المثال قمنا بإبتكار قائمة أفقية بسيطة بإستخدام الـ Flexbox، تذكر انه يمكنك أيضا صناعة قوائم عمودية كذلك، من أجل تحقيق ذلك سنقوم بإستخدام عنصر navbar و نقوم بتوفير عناصر القائمة وسطه، لنطلع على الكود أولا و نقوم بشرحه :
نبدأ بإعطاء الـ Container او الحاوية و في هذه الحالة الـ navbar خاصية الـ display : flex لنشير الى ان كل العناصر وسط هذا الجزء الآن هي عناصر مرنة، يمكننا تحديد إتجاه العناصر (items) وسط الحاوية عن طريق خيار flex-direction الذي يحمل خاصيتين row او column مع خاصيتين عكسيتين row-reversed او column-reversed، بما أننا نريد من النتيجة ان تكون افقية فإن الخيار الجيد هو row، يمكننا الآن التلاعب بتلك العناصر بكل حرية عن طريق خيارات مثل justify-content التي تساعدني على تحديد تموضع العناصر، فمثلا justify-content : flex-start سيقوم بتموضعها من اليمين لليسار، و flex-end من اليسار لليمين، خيار center سيضع كل العناصر في الوسط اما خيار space-between الذين إستخدمناه يقوم بنشر كل العناصر على طيلة عرض الحاوية.
خاصية align-items شبيهة بالـ justify-content لكنها تشتغل على المقطع العمودي، ففي مثالنا هذا قمنا بوضع العناصر في وسط الـ navbar التي تأخذ في الطول (height) قيمة 100vh ( نعم نعلم انه لا يوجد navbar تأخذ هذا الطول لكن فقط من باب الشرح ) من أجل وضع الناصر في الوسط نستخدم align-items، نفسها تأخذ كلا من flex-end و flex-start ان اردت وضعها في البداية او النهائية بدل الوسط.
نذكر بشكل كبير انه وجب تحديد كل من الطول و العرض (height & width) أثناء التعامل مع الـ flexbox بغية الحصول على نتائج مرضية، كذلك يوجد العديد و العديد من الخصائص الأخرى في الـ Flexbox التي لم نلجأ لها، كون ان هذا المقال يشرح لك بشكل أساسي اهم الفروقات بين الـ Grid و الـ Flexbox.
