يشرح لك هذا الدليل كيفية اكتشاف عناصر 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
يمكنك تمرير مؤشر الماوس فوق عنصر flexbox في لوحة العناصر لعرض التنسيق. يظهر التراكب فوق العنصر، مخططًا بخطوط منقطة لإظهار موضع محتواه وعناصره.
بدلاً من ذلك، يمكنك النقر فوق الشارة لتبديل عرض تراكب flexbox.
حاوِل تغيير القيمة إلى justify-content: flex-end. ويتم تغيير التراكب وفقًا لذلك.
الرموز في المحرِّر المرن تدرك السياق. وسيتم تغييره وفقًا لاتجاه التصميم. على سبيل المثال، عند تغيير flex-direction إلى column، يتم تدوير الرموز في المحرِّر المرن وفقًا لذلك. يتم تحديث التراكب على الفور أيضًا.
ضبط لون تراكب flexbox
افتح جزء التنسيق وانتقِل للأسفل إلى القسم Flexbox. يمكنك عرض جميع عناصر flexbox الخاصة بالصفحة هنا.
يمكنك تبديل تراكب كل عنصر flexbox مع وضع مربع الاختيار بجانبه. يماثل النقر على badge في شجرة نموذج العناصر في المستند (DOM).
بخلاف ذلك، يمكنك تغيير لون التراكب بالنقر فوق أيقونة اللون الموجودة بجانبه. على سبيل المثال، يتم تغيير لون تراكب container إلى الأسود.
للانتقال إلى عنصر flexbox في شجرة DOM، يمكنك النقر على رمز أداة الاختيار بجانبه.