يشرح لك هذا الدليل كيفية اكتشاف عناصر flexbox على إحدى الصفحات، بالإضافة إلى فحص تنسيقات flexbox وتعديلها في لوحة العناصر.
لقطات الشاشة التي تظهر في هذه المقالة مأخوذة من صفحة الويب هذه: توسيط عنصر نصي باستخدام Flexbox.
التعرُّف على إطار flexbox لصفحات الأنماط المتتالية (CSS)
عند تطبيق display: flex أو display: inline-flex على عنصر HTML في صفحتك، يمكنك
رؤية شارة flex بجانبها في لوحة العناصر.
تعديل التنسيقات باستخدام محرر flexbox
يمكنك تعديل تنسيقات flexbox بشكل مرئي باستخدام محرِّر flexbox. على سبيل المثال، إليك كيفية وضع <h1> في الوسط الخاص بالصفحة التجريبية هذه داخل حاويتها <div class="container">.
- افحص عنصر الحاوية.
- في لوحة الأنماط، يمكنك رؤية الزر محرِّر flexbox بجانب بيان
display: flex.
- انقر عليها لفتح محرِّر flexbox. يعرض المحرِّر قائمة بخصائص Flexbox. يتم عرض خيارات القيمة لكل موقع كأزرار للرموز.
- لتوسيط النص على الشاشة، يمكنك النقر على زرَّي
justify-content: centerوalign-items: center.
- يظهر النص في منتصف النص الآن. لاحِظ أنه تمت إضافة التعريفَين
justify-content: centerوalign-items: centerفي لوحة الأنماط.
فحص تنسيق المربّع المرن
يمكنك تمرير مؤشر الماوس فوق عنصر المربّع المرن في لوحة العناصر لعرض التصميم. يظهر التراكب فوق العنصر، ويتم وضعه بخطوط منقطة لعرض موضع المحتوى والعناصر.
بدلاً من ذلك، يمكنك النقر فوق الشارة لتبديل عرض تراكب flexbox.
حاوِل تغيير القيمة إلى justify-content: flex-end. ويتم تغيير التراكب وفقًا لذلك.
تكون الرموز في محرِّر Flex واعية بالسياق. وسيتم تغييره وفقًا لاتجاه التصميم. على سبيل المثال، عند تغيير flex-direction إلى column، يتم تدوير الرموز في أداة تعديل المحتوى المرن وفقًا لذلك. يتم تحديث التراكب على الفور أيضًا.
ضبط لون التراكب في المربّع المرن
افتح جزء التنسيق وانتقِل للأسفل إلى القسم Flexbox. يمكنك عرض جميع عناصر flexbox الخاصة بالصفحة هنا.
يمكنك تبديل تراكب كل عنصر flexbox مع وضع مربع الاختيار بجانبه. يماثل النقر على badge في شجرة نموذج العناصر في المستند (DOM).
بخلاف ذلك، يمكنك تغيير لون التراكب بالنقر فوق أيقونة اللون الموجودة بجانبه. على سبيل المثال، يتم تغيير لون تراكب container إلى الأسود.
للانتقال إلى عنصر flexbox في شجرة DOM، يمكنك النقر على رمز أداة الاختيار بجانبه.