جدول المحتويات:

كيف تستخدم Flexbox والشبكة؟
كيف تستخدم Flexbox والشبكة؟

فيديو: كيف تستخدم Flexbox والشبكة؟

فيديو: كيف تستخدم Flexbox والشبكة؟
فيديو: How to Center Anything with CSS - Flexbox, CSS Grid and Absolute Positioning 2024, شهر نوفمبر
Anonim

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

بعد ذلك ، قد يسأل المرء أيضًا ، هل يمكنك استخدام Flexbox والشبكة معًا؟

في الغالب لا. جريد هو أحدث بكثير من فليكس بوكس ولديه دعم أقل قليلاً للمتصفح. أنهم علبة الشغل سويا : أ جريد غرض علبة يكون فليكس بوكس وعاء. أ ثني غرض علبة يكون جريد وعاء.

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

وفقًا لذلك ، ما هي شبكة Flexbox؟

فليكس بوكس مصنوع من أجل تخطيطات ذات بعد واحد و جريد مصنوع لتخطيطات ثنائية الأبعاد. هذا يعني أنك إذا كنت تضع العناصر في اتجاه واحد (على سبيل المثال ثلاثة أزرار داخل رأس) ، فيجب عليك استخدام فليكس بوكس : سيمنحك مرونة أكبر من CSS جريد.

متى يجب ألا تستخدم Flexbox؟

عندما لا تستخدم فليكس بوكس

  1. لا تستخدم flexbox لتخطيط الصفحة. يعد نظام الشبكة الأساسي الذي يستخدم النسب المئوية وعروض العرض القصوى واستعلامات الوسائط طريقة أكثر أمانًا لإنشاء تخطيطات صفحات سريعة الاستجابة.
  2. لا تضيف العرض: فليكس ؛ لكل واحد div حاوية.
  3. لا تستخدم flexbox إذا كان لديك الكثير من الزيارات من IE8 و IE9.

موصى به: