نبذة عن الـ Flexbox :
متى و أين يمكن إستخدام الـ Flexbox ؟
يمكن إستخدام الـ Flexbox في كل شيئ تقريبا، يمكنك إستخدامه في الـ Navbar من أجل بناء قائمة علوية سواء افقية او عمودية متساوية و إحترافية و أيضا متجاوبة، يمكن إستخدامها في صناعة قوائم جانبية (Sidebars) او صناعة سلايدر حتى و الكثير، كما يمكنها ان تقوم بترتيب اي مجموعة عناصر داخل تقسيم معين (Div) بالشكل الذي تريده، يكفي ان تعطي للـ Div خاصية display : flex و لك الحرية في التحكم في كل الخصائص.إن الخواص التي يجلبها الـ Flexbox تسمح لك بإستخدامه في أي عنصر، لكن إن اردت جعل الصفحة كاملة عبارة عن Flex فتتعقد الأمور، و قد لا يكون الـ Flexbox أفضل خيار لك في هذه الحالة، لذلك ابقِ إستخدامك للـ Flex في إطار عناصر الويب فقط لا الصفحة، يمكنك إستخدام الـ Flex في أزيد من عنصر، بل حتى انه يمكنك إستخدام Flexbox وسط Flexbox آخر، و إن كانت الأمور ستصبح نوعا ما متلخبطة، لكن هذه الإمكانية غير مستبعدة.
كيف تستخدم الـ Flexbox ؟
الـ Flexbox يجعل من اي عناصر وسط حاوية مرنة بإستخدام عدة خصائص، في هذا المثال قمنا بإبتكار قائمة أفقية بسيطة بإستخدام الـ Flexbox، تذكر انه يمكنك أيضا صناعة قوائم عمودية كذلك، من أجل تحقيق ذلك سنقوم بإستخدام عنصر navbar و نقوم بتوفير عناصر القائمة وسطه، لنطلع على الكود أولا و نقوم بشرحه :

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

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