فحص وتصحيح أخطاء تنسيقات CSS flexbox

Jecelyn Yeen

يوضّح لك هذا الدليل كيفية اكتشاف عناصر flexbox في الصفحة، بالإضافة إلى فحص تصاميم flexbox وتعديلها في لوحة العناصر.

لقطات الشاشة التي تظهر في هذه المقالة مأخوذة من صفحة الويب هذه: توسيط عنصر نص باستخدام Flexbox.

التعرّف على CSS flexbox

عندما يتم تطبيق display: flex أو display: inline-flex على عنصر HTML في صفحتك، يمكنك رؤية شارة flex بجانبه في لوحة العناصر.

التعرّف على نموذج Flexbox

تعديل التنسيقات باستخدام محرِّر Flexbox

يمكنك تعديل تنسيقات المربّعات المرنة بشكل مرئي باستخدام أداة تعديل المربّعات المرنة. على سبيل المثال، إليك كيفية وضع النص <h1> في هذه الصفحة التجريبية في منتصف الحاوية <div class="container">.

  1. افحص عنصر الحاوية.
  2. في لوحة الأنماط، يمكنك رؤية زر محرر المربّعات المرنة بجانب بيان display: flex. زر محرِّر نموذج flexbox
  3. انقر عليه لفتح محرِّر Flexbox. يعرض المحرِّر قائمة بخصائص Flexbox. يتم عرض خيارات قيم كل خاصية كأزرار رموز. محرِّر flexbox
  4. لتوسيط النص على الشاشة، يمكنك النقر على الزرَّين justify-content: center وalign-items: center. وضع النص في منتصف الحاوية
  5. يظهر النص الآن في وسط الصفحة. لاحظ أنّه تمت إضافة ملفّي البيان justify-content: center وalign-items: center في لوحة الأنماط.

فحص تنسيق المربّع المرن

يمكنك تمرير مؤشر الماوس فوق عنصر المربّع المرن في لوحة العناصر لعرض التصميم. يظهر التراكب فوق العنصر، ويتم وضعه بخطوط منقطة لعرض موضع المحتوى والعناصر.

تمرير مؤشر الماوس فوق عنصر Flexbox

بدلاً من ذلك، يمكنك النقر على الشارة لتبديل عرض تراكب المربّع المرن.

تغيير justify-content إلى flex-end

حاوِل تغيير القيمة إلى justify-content: flex-end. ويتم تغيير الصورة المتراكبة وفقًا لذلك.

justify-content: flex-end

تكون الرموز في محرِّر Flex واعية بالسياق. وسيتغيّر ذلك حسب اتجاه التنسيق. على سبيل المثال، عند تغيير flex-direction إلى column، يتم تدوير الرموز في أداة تعديل المحتوى المرن وفقًا لذلك. ويتم أيضًا تعديل الصورة المتراكبة على الفور.

ضبط لون التراكب في المربّع المرن

افتح لوحة التنسيق وانتقِل للأسفل إلى قسم Flexbox. يمكنك الاطّلاع على جميع عناصر flexbox في الصفحة هنا.

لوحة التنسيق

يمكنك تبديل التراكب لكل عنصر من عناصر المربّع المرن باستخدام مربّع الاختيار بجانبه. وهذا الإجراء مماثل للنقر على badge في شجرة نموذج DOM.

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

تغيير لون العنصر المتراكب

للانتقال إلى عنصر مربّع مرن في شجرة نموذج عناصر المستند (DOM)، يمكنك النقر على رمز أداة الاختيار بجانبه.