كيفية التخطيطات مع CSS: Flexbox أو الشبكة؟

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

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

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

تخطيطات واسعة النطاق مع CSS-Grid

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

ولكن بالطبع ، هناك اختلافات كبيرة ، ومزايا أيضا. أولا ، شبكة CSS مفيدة بشكل خاص لإنشاء تخطيطات معقدة. أولا ، يتم تعريف الشبكة ، والتي تتكون من خطوط وأعمدة. تسمح لك السمات "صفوف قالب الشبكة" و "أعمدة قالب الشبكة" بتحديد عدد وأحجام عناصر الشبكة. يتم تعريف العرض والارتفاعات بوحدة جديدة "fr" ، وهي اختصار لكلمة "fraction".تجعل قيمة "1fr" جميع الأعمدة والخطوط بنفس الحجم ، ونشرها عبر المساحة المحددة. إذا كنت تريد أن يكون العمود ضعف حجم الآخرين ، قم بتعيين "2fr". وبالطبع ، من الممكن أيضًا استخدام الوحدات المطلقة ، مثل وحدات البكسل.بعد ذلك ، يجب أن تكون عناصر HTML الفردية مضغوطة في الشبكة. لذلك ، من المهم تحديد مناطق الشبكة التي ينبغي أن يتناولها العنصر. للقيام بذلك ، استخدم سمات CSS الأربعة: "grid-column-start" و "grid-column-end" و "grid-row-start" و "rid-row-end".مع "الفجوة الشبكية" ، من الممكن أيضًا إعداد فجوة بين مناطق الشبكة الفردية.

CSS-Flexbox or CSS-Grid؟

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

يعد CSS flexbox هو الاختيار الصحيح عندما يتعلق الأمر بفرز العناصر بجوار أو فوق بعضها البعض. على سبيل المثال ، عند تصميم معرض ، أو تريد محاذاة الروابط وفقًا لذلك.
بشكل عام ، يمكن للمرء أن يقول: يخدم CSS flexbox محاذاة العناصر أحادية البعد. هذه العناصر لا تعمل إلا في اتجاه واحد - إما إلى اليمين أو إلى الأسفل ، مع وجود مفتاح خط أو عمود ليكون خيارًا ممكنًا. شبكة CSS هي ثنائية الأبعاد ، لأنها توفر لك مساحة شبكة تسمح لك بوضع العناصر بحرية.
التوافق المتصفح.
الحجة الوحيدة ضد استخدام شبكة CSS هي توافق المستعرض. الآن ، يتم دعم طراز flexbox من قبل جميع المتصفحات ، وفي بعض الأحيان حتى للإصدارات المتعددة. حتى Internet Explorer 11 موجود على متنه ، على الرغم من وجود مشاكل به بين الحين والآخر..

ومع ذلك ، فقد تم دعم تنسيق الشبكة ، من قبل Chrome و Firefox و Safari لفترة طويلة. ولكن لا يمكن لـ Internet Explorer أو Edge العمل مع هذا. هذا شيء يجب مراعاته عند استخدامه.

تعديل المقال