يوضّح لك هذا الدليل كيفية اكتشاف عناصر flexbox على الصفحة، بالإضافة إلى فحص تنسيقات flexbox وتعديلها في لوحة Elements.
إنّ لقطات الشاشة التي تظهر في هذه المقالة مأخوذة من صفحة الويب التالية: توسيط عنصر نصي باستخدام Flexbox.
التعرّف على ميزة CSS flexbox
عند تطبيق display: flex أو display: inline-flex على أحد عناصر HTML على صفحتك، يمكنك رؤية شارة flex بجانبه في لوحة العناصر.
تعديل التنسيقات باستخدام أداة تعديل flexbox
يمكنك تعديل تنسيقات flexbox بشكل مرئي باستخدام flexbox editor. على سبيل المثال، إليك كيفية توسيط النص <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، يمكنك النقر على رمز المحدِّد المجاور له.