دليلك نحو الـ Flexbox و الـ Grid ... متى و أين و كيف تستخدمهما ؟

دليلك نحو الـ Flexbox و الـ Grid ... متى و أين و كيف تستخدمهما ؟

بتطور تقنيات الويب و تطوير الواجهات سواء من حيث التفاعلات البصرية (UI/UX) او من حيث برمجة و تحقيق هذا التفاعل في صفحة ويب حية عن طريق تقنيات الـ Front End أصبح من اللازم على كل مطور مواكبة هذه التطورات، فتقنيات الويب كالـ HTML, CSS, Javascript قد غيرت وقع أحداثها و لم تعد تلك اللغات الساكنة ذات مستقبل محدود التي يمكنك تعلمها في ظرف سويعات، بل التعمق فيها الآن يتطلب أشهراً و أياماً من الممارسة الفعلية لها. 
بتخصيص الأمر أكثر في الـ CSS، فقد كانت هذه الأخيرة محدودة الأفعال حتى إصدار نسختها الأخيرة التي إحتوت على بعض التقنيات المميزة منها إستخدام المتغيرات (Variables) في الـ CSS، إستخدام عناصر الـ @media و الـ @support للتحكم في الظهور بالنسبة للشاشة او المتصفح و الكثير من التقنيات الأخرى، إلا ان تقنيتي الـ Flexbox و الـ Grid إنتزعتا اللقب من أفضل التحديثات للـ CSS.

دليلك نحو الـ Flexbox و الـ Grid ... متى و أين و كيف تستخدمهما ؟


و حتى بعد مرور سنوات على إطلاقها، لازالت اللخبطة في المفهومين قائمة لدى البعض، متى و أين و كيف يمكن إستخدام الـ Flexbox و قرينه الـ Grid؟ ما اوجه الإختلافات بين كليهما؟ و إن كانا يقومان بنفس العمل فلما يوجد إثنين منهما لا واحد ؟ ثم السؤال الذي يعشقه الكثيرون : أيهما أفضل في الإستخدام؟ 
إن لم يكن بجانبك كأس قهوة عزيزي فأحضر واحداً، و إن لم تمتلك كأس قهوة أحضر كأس ماء، فنحن على وشك أن نشرح لك المفهومين من الصفر، كيفية إستخدامهما و متى يجب عليك إستخدامهما. 

 نبذة  عن الـ Flexbox : 


دليلك نحو الـ Flexbox و الـ Grid ... متى و أين و كيف تستخدمهما ؟

من خلال إسم هذه الخاصية (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 و الـ Grid ... متى و أين و كيف تستخدمهما ؟

الـ 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 الذين إستخدمناه يقوم بنشر كل العناصر على طيلة عرض الحاوية.

دليلك نحو الـ Flexbox و الـ Grid ... متى و أين و كيف تستخدمهما ؟

خاصية align-items شبيهة بالـ justify-content لكنها تشتغل على المقطع العمودي، ففي مثالنا هذا قمنا بوضع العناصر في وسط الـ navbar التي تأخذ في الطول (height) قيمة 100vh ( نعم نعلم انه لا يوجد navbar تأخذ هذا الطول لكن فقط من باب الشرح ) من أجل وضع الناصر في الوسط نستخدم align-items، نفسها تأخذ كلا من flex-end و flex-start ان اردت وضعها في البداية او النهائية بدل الوسط.
نذكر بشكل كبير انه وجب تحديد كل من الطول و العرض (height & width) أثناء التعامل مع الـ  flexbox بغية الحصول على نتائج مرضية، كذلك يوجد العديد و العديد من الخصائص الأخرى في الـ Flexbox التي لم نلجأ لها، كون ان هذا المقال يشرح لك بشكل أساسي اهم الفروقات بين الـ Grid و الـ Flexbox.

 نبذة عن الـ Grid :


دليلك نحو الـ Flexbox و الـ Grid ... متى و أين و كيف تستخدمهما ؟

الـ Grid جاء بشكل أساسي ليعوض تقنيات الـ Grid في إطارات العمل الشهيرة للواجهات مثل الـ Boostrap او Semantic و غيرها، فالكثيرون يستخدمون البوتسراب مثلا من أجل نظام الـ Grid فقط لا شيئ أخر، فلما لا نقوم بإضافة هذا النظام في الـ CSS و نسهل على المطور تضمين مكتبة كبيرة من أجل خاصية واحدة ؟
الـ Grid يشتغل على نطاق أوسع من الـ Flexbox، فالـ Flexbox يتحكم فقط في العناصر داخله و يحدد تموضعها، بينما الـ Grid الهدف الأساسي منه هو تقسيم الصفحة بشكل كامل من أجل سهولة التجاوب أثناء التطوير، في الـ Grid نقوم بتحديد مساحة كل جزء بتقسيم الصفحة لـ 12 جزء، و نقوم مثلا بتوفير 6/12 لمحتوى الصفحة، و ربما 4/12 للـ Sidebar و هكذا، نقوم بتعيين التقسيم الخاص بكل جزء من أجزاء الصفحة، يمكن إستخدام الـ Grid على منحى رئيسي ضخم ( اي على طول الصفحة كاملة ) او على عنصر صغير محدد مثل الـ Flex ( مثلا عنصر navbar )، كما يمكن إدراج Grid وسط Grid آخر بكل سهولة.

متى و أين يمكن إستخدام الـ Grid :

قبل الشروع في برمجة أي جزء من صفحة الويب، انت تحتاج الى تقسيمها من أجل تباث الموازنة و من أجل جعل كل عنصر يأخذ حيزه الخاص دون تداخل مع عناصر أخرى، بحيث مثلا سنعطي للـ navbar مساحة عرض كاملة اي 12/12 جزء في الـ Grid، ثم المحتوى ربما 8/12 و نعطي لمساحة جانبية Sidebar مساحة 4/12، و نجعل الفوتر يأخذ أيضا مساحة 12/12، بعدها نشرع بكتابة العناصر الخاصة بكل جزء حينها، و إن اردنا التلاعب به يمكننا حينها إستخدام الـFlexbox .
يمكن إستخدام الـ Grid على المقطع الكلي للصفحة، او المقاطع الجزئية للصفحة، او حتى المقاطع المصغرة للصفحة بدون مشاكل، فالـ Grid يضع الحدود اللازمة لكل عنصر و التي لن يتجاوزها مادمت تحدد له كل الحدود من طول و عرض و حواف و تباعد.

 كيف تستخدم الـ Grid :



أترى هذه التحفة الفنية السيئة من طرفنا؟ قد تتسائل : نعم يمكنني صناعة مثلها بإستخدام البوتستراب او أي مكتبة UI أخرى، لكن هل يمكنك الحصول على نفس النتيجة بالـ CSS؟ و بالمناسبة هي متجاوبة أيضا.
هنا يتدخل عمل الـ Grid، دعونا نلقي نظرة عن الكود البرمجي و نقوم بتحليله قليلا لنستكشف طريقة عمل الـ Grid :

يمكنك ان تلاحظ اننا ابقينا جزء الـ HTML نظيفا و بسيطا دون الحاجة الى عدة تقسيمات تحمل containers و row و col-sm او col-md، قمنا بتطوير الـ HTML الخاص بنا كما يجب و هيكلة الصفحة كما يجب، من أجل فرض التقسيم و تهيئة  كل جزء ليأخذ مكانه سنستخدم الـ Grid، بما أن التقسيم سيشمل الصفحة كاملة سنقوم بتطبيقه في وسم body، سنعطي للـ body خاصية display : grid او display : inline-grid، لنبدأ في تطبيق الخواص الأخرى من أجل التنظيم.
عندما تستخدم الـ Grid عليك ان تحدد عدد الرفوف (Rows) و عدد الأعمدة (Columns) في أي جزء تشتغل عليه، بالنسبة لنا سنحتاج الى 3 رفوف مقسمة على طول الصفحة، و عمود واحد فقط، إذن الكود grid-template-rows : 10vh 53vh 33vh سيقوم بتقسيم الصفحة الى 3 رفوف مساحة كل رف كما هي مخصصة في الكود على التوالي ( 10 ثم 53 ثم 33 يمكنك إختيار اي تقسيم إخترت هذا التقسيم لإبقاء الصفحة ظاهرة بالكامل من أجل الشرح لا أكثر ) .

دليلك نحو الـ Flexbox و الـ Grid ... متى و أين و كيف تستخدمهما ؟

ثم لنقوم بتحديد العمود الواحد سنقوم بإضافة خاصية grid-template-columns : 12fr ، يتم تقسيم الصفحة في العرض كما أشرنا الى 12 قسم، 12fr يعني انه سيأخذ كل مساحة العرض، إن اضفت مثلا 6fr 6fr سأحصل على عمودين ذوي نفس القياس، يمكنني إستخدام خاصية repeat() أيضا إن اردت إضافة الكثير من الأعمدة لها نفس القياس دفعة  واحدة.
من أجل ترك بعض الفراغ بين الرفوف و الأعمدة ( كما في الصورة ) سنستخدم خاصية grid-row-gape التي تحدد لي مساحة الفراغ بين الرفوف، و grid-column-gape لتحديد الفراغ بين الأعمدة، بما انني أستخدم عمودا واحدا فلن يظهر لك حاليا الفراغ، بهذه الطريقة نقسم الصفحة او اي جزء من الصفحة الى Grid.
في وسم الـ main ستلاحظ انه لدي جزئين الـ content و الـ sidebar اللذان ارديهما ان يكونا محاديين لبعضهما البعض في نفس الرف (Row)، لذلك سأقوم بتطبيق الـ Grid على وسم الـ main ثم اقوم بتقسيم الأعمدة الى جزئين عن طريق grid-template-columns ، أريد من الـ content ان يكون أكبر من الـ Sidebar في حدود 12fr، لذلك سأوفر 9fr للـ Content و 3fr للـ Sidebar.
بإستخدام نفس المبدأ يمكنني تقسيم الصفحة كاملة مع ترك الـ HTML نظيف و واضح لإضافة أي محتوى لاحقا إليه.

 ما الفرق إذن بين كل من الـ Grid و الـ Flexbox ؟ 

الـ Grid أكثر توسعا و شمولية و يمكن العمل بها على نطاق الصفحة بالكامل و على نطاق العناصر الصغرى كذلك، لكن من حيث العناصر الصغرى فإن خصائصه شبه محدودة و لا تضمن لك تلك المرونة، على عكس الـ Flexbox الذي يضمن لك التحرك الكامل لكل العناصر داخل اي عنصر او تقسيم محدد، لكن العمل بالـ Flexbox على نطاق الصفحة كاملا أمر غير إحترافي و صعب نسبيا ( صدقني فقد جربت ذلك و كان الأمر كابوساً ).
لذلك يمكنك العمل بالـ Grid لتقسيم الصفحة و معطياتها، و بالـ Flexbox من أجل تموضع العناصر الصغرى وسط ذلك التقسيم. 

شاركه على :