نصائح حول أدوات مطوري البرامج: كيفية فحص تطبيق flexbox في CSS وتصحيح الأخطاء فيه
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تسهِّل "أدوات مطوّري البرامج في Chrome" تصحيح أخطاء تنسيقات CSS flexbox. تقدّم لك لوحة العناصر أداة Flexbox Editor وعنصرًا تراكبيًا قابلاً للتخصيص يتكيّف مع السياق.
شاهِد الفيديو لمعرفة كيفية إجراء ما يلي:
- استخدِم محرِّر Flexbox لتغيير سمات Flexbox بنقرة زر بدلاً من كتابتها.
- يمكنك تبديل تراكب Flexbox في مساحة العرض للاطّلاع على التغييرات التي تجريها على الفور.
- استخدِم قسم العناصر > التنسيق > Flexbox للاطّلاع على قائمة بجميع العناصر وتحديد موقعها في شجرة DOM. بالإضافة إلى ذلك، يمكنك تخصيص ألوان التراكب هنا.
للاطّلاع على مزيد من المعلومات عن CSS flexbox بشكل عام، اطّلِع على التعرّف على CSS > Flexbox.
للحصول على تجربة عملية أكثر لتصحيح الأخطاء في "أدوات مطوّري البرامج"، اتّبِع البرنامج التعليمي فحص تنسيقات CSS flexbox وتصحيح الأخطاء فيها.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2022-09-01 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2022-09-01 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,[]]
