الشبكة أو Flexbox؟

تقول ميشيل باركر ، مؤلفة المادة التي ننشرها اليوم ، إن مناقشة تويتر الأخيرة التي بدأها كريس كويير جعلتها تفكر في كيفية اختيار مطوري الويب بين تقنيات CSS Grid Layout و CSS Flexbox Layout عند تصميم المخططات.



سأل كريس كويير في تغريدة له الجمهور سؤالًا حول كيفية معرفة أولئك الذين يعرفون ما هي الشبكة و Flexbox لشرح الفرق بين هذه التقنيات.

من بين الإجابات على هذا السؤال ، والتي ، وفقًا لميشيل ، كانت متوقعة تمامًا ، كان من الممكن ملاحظة الأفكار القيمة لراشيل أندرو وجين سيمونز.

قالت راشيل إن تقنية Flexbox مصممة لتطوير تخطيطات أحادية البعد تصف كيفية ترتيب العناصر في صف أو عمود. كما تم تصميم تقنية الشبكة لتطوير تخطيطات ثنائية الأبعاد تتضمن كل من الصفوف والأعمدة.

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

تلاحظ ميشيل أن مجرد قراءة التغريدات لا يكشف عن ميزات استخدام تقنيات الشبكة والشبكة المرنة. في هذه المقالة ، تريد التحدث عن متى وأين تستخدم هذه التقنيات ، وكذلك حول سبب تفضيل تقنية ما على أخرى.

عند قراءة الإجابات على سؤال كريس ، فوجئت ميشيل بعدد الأشخاص الذين قالوا إنهم سيستخدمون الشبكة فقط للتخطيطات على مستوى الصفحة ، وفليكس بوكس ​​لكل شيء آخر. إذا كنت تلتزم أيضًا بهذه القاعدة ، فهذا يعني أنك تحد بشكل خطير من استخدام قدرات الشبكة القوية في المواقف المختلفة. إن الشيء الرئيسي الذي يود مؤلف المادة أن يوصي به لمطوري الويب هو أنه ينبغي اعتبار كل تصميم كشيء خاص ، وتحليل القدرات المتاحة ، وعدم وضع افتراضات حول التقنيات اللازمة لإنشاء ذلك. إليك بعض الأسئلة التي يمكنك طرحها على نفسك عند اختيار تقنية مناسبة لتطوير التصميم.

كم عدد الحسابات التي عليك القيام بها؟

إليكم إجابتي على سؤال كريس. قلت بعد ذلك أنه إذا بدا لي أنه عند إنشاء التصميم ، يجب عليك استخدام وظيفة calc() CSS كثيرًا ، فهذا يعني عادةً أنني بحاجة إلى تقنية الشبكة ، وليس إلى Flexbox.

إذا كان عليك غالبًا اللجوء إلى وظيفة calc() لحساب أحجام الصفوف والأعمدة بدقة (إذا كنت بحاجة إلى مراعاة الحقول الداخلية ، على سبيل المثال) ، فهذا يشير غالبًا إلى أنه يجب عليك استخدام تقنية الشبكة ، نظرًا لاستخدام وحدة قياس fr تبسط حياتك إلى حد كبير. على الرغم من أن هذه النصيحة ، كتوصية عامة ، قابلة للتطبيق تمامًا ، فإنها لا تصف الصورة الكاملة لما يحدث. في بعض الأحيان ، قد تكون الشبكة ضرورية أيضًا في تلك الحالات عندما لا يتم استخدام وظيفة calc() عند إنشاء التصميم. على سبيل المثال ، في موقف نتحدث فيه عن تخطيط ثنائي الأبعاد بعرض ثابت ، بعرض عناصر 200 بكسل. عند تطوير مثل هذا التخطيط ، فإن وظيفة calc() ليست ضرورية لمعرفة عرض العناصر ، ولكن في نفس الوقت ، يمكن أن يكون سلوك المخططات المبنية على أساس الشبكة مفيدًا للغاية. وبالمثل ، تكون المواقف ممكنة من الأفضل فيها استخدام Flexbox واستخدام وظيفة calc() لا محالة. نتيجة لذلك ، ما نتحدث عنه هنا لا يُنظر إليه كقاعدة صارمة ، مثل: "استخدام calc() و Flexbox؟ لذلك تحتاج إلى التبديل إلى الشبكة ، "ولكن كمعلومات للتفكير.

بعد واحد أو اثنين؟

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


مثال الشبكة

كيف يجب أن تتصرف العناصر؟

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

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

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

يؤدي استخدام مثل هذا التخطيط إلى حقيقة أن العناصر يتم وضعها تلقائيًا ، بينما لا نحتاج إلى القيام بأي شيء آخر. إذا منحنا أنفسنا وقتًا للتفكير ، فيمكننا استخدام minmax() Grid auto-fit() و minmax() ، مما سيتيح لنا الحصول على تصميم كامل الاستجابة دون استخدام استعلامات الوسائط. افتح هذا المثال ، حاول تغيير حجم النافذة وانظر إلى ما يحدث.


مثال الشبكة

يمكنك معرفة المزيد حول هذه التقنية ، وكذلك بعض الأشياء المفيدة الأخرى ، من خلال مشاهدة هذا الفيديو.

إذا أنشأنا تخطيطًا مشابهًا باستخدام Flexbox ، فخلافًا للمثال الموصوف للتو ، سنحتاج إلى تبسيط كل من العناصر والحاوية:

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

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

فيما يلي مثال على CodePen يوضح ما سبق.


مثال فليكس بوكس

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

تستخدم العديد من أطر CSS الحديثة بعض أشكال هذه الطريقة لتمثيل المخططات. وبالمناسبة ، إذا كنت ترغب في المضي بهذه الطريقة ، يمكنني أن أوصي بـ Susy ، وهي مجموعة من الأدوات التي تتعامل مع كل الصعوبات في إنشاء مثل هذه المخططات.

لذا ، ما هو الأفضل في هذا الموقف؟ الشبكة أو Flexbox؟ يبدو أن الشبكة لها بعض المزايا التي لا يمكن إنكارها هنا ، ولكن من أجل الإجابة على هذا السؤال ، نحتاج إلى التفكير فيما يجب أن يحدث إذا كان لدينا أكثر من تسعة عناصر ، ولكن أقل من 12 عنصرًا (إذا كان هناك أي على سبيل المثال ، 12 ، ثم سيتيح لهم ذلك ملء سطر جديد بالكامل). هل نحتاج إلى أن تكون العناصر الجديدة في بداية السطر التالي ، كما كان الحال في الأمثلة التي رأيناها؟ أم أننا بحاجة إليهم لكي يتصرفوا بشكل مختلف؟ ربما إذا كان هناك عنصر واحد فقط في الصف التالي ، فسنحتاجه لشغل المساحة الكاملة لهذا الصف ، كما في الخيار A في المثال التالي؟ أو ربما إذا كان هناك عنصرين فقط في السطر الجديد ، فنحن بحاجة إلى توسيطهما ، كما في المثال "ب"؟


خيارات مختلفة لوضع العناصر في السطر الأخير

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

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


يشغل العنصر كل مساحة الصف المتاحة.

نتيجةً لذلك ، اتضح أنه بغض النظر عن التقنية المستخدمة لتشكيل التصميم ، فإن الأمر كله يتعلق بنوع سلوك العناصر الموجودة في التخطيط الذي يهم المطور. وفي مواقف مختلفة ، يمكن إعطاء إجابات مختلفة على نفس السؤال.

هل تحاول استبدال Flexbox بشبكة؟

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


مثال المكون

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


إنشاء قوائم Flexbox

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

كيف يجب أن يظهر الشكل في المتصفحات التي لا تدعم تقنية الشبكة؟

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

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

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

النتائج

ناقشنا بعض الأمثلة البسيطة والواسعة الانتشار لتطوير التخطيط ، وقمنا بفحص ميزات استخدام تقنيات الشبكة و Flexbox في بنائها. نأمل أن نتمكن من تقديم الغذاء للتفكير لأولئك الذين ينشغلون في اختيار التكنولوجيا المناسبة لتخطيطهم القادم.

أعزائي القراء! في أي حالات تستخدم تقنية الشبكة ، وفيها - Flexbox؟