مولد مُرن CSS (بصري)
مرشد
مولد مُرن CSS (بصري)
صمم تخطيطات Flexbox بوضوح وانسخ CSS جاهز للإنتاج. قم بتعديل الاتجاه، التخطيط، التحديد، المسافة، والتعديلات الخاصة بكل عنصر، مع تحديث العرض التجريبي فورًا. لا حاجة للتخمين، ولا حاجة لاستخدام أدوات تطوير Chrome — فقط اختر السلوك المطلوب للعلبة، وشاهد تطبيقه، وانسخ القواعد المُولَّدة.
كيفية استخدام
- اختر direction-flex (السطر، السطر المعاكس، العمود، العمود المعاكس) لتحديد المحور الرئيسي.
- اختر موضع التخطيط و موضع التخطيط للعناصر لتحديد كيفية ترتيب الأطفال على كل محور.
- تفعيل الحزم إذا كان يجب أن تُقسَّم العناصر على سطور جديدة — موضع التخطيط للسطر سيظهر للتحكم في السطور المتعددة.
- اضبط المسافة بالبُكُل إلى تباعد العناصر دون تغييرات في المُسافات.
- تغيير عدد العناصر لإضافة أو إزالة أطفال Flex (1–12).
- انقر على أي عنصر في العرض التجريبي لفتح محرر العنصر وتعديل مُضاعف النمو, مُضاعف الانكماش, القاعدة الأساسية, موضع التخطيط الذاتي، أو الترتيب.
- انسخ CSS المُولَّدة وانسخها إلى ملفك المُصمم.
خصائص
- عرض تجريبي مباشر – رؤية تغيير تخطيط العلبة والعناصر فورًا عند تغيير الخصائص.
- أوامر التحكم الكاملة للعلبة – الاتجاه، التخطيط، التخطيط للعناصر، التحديد، التخطيط للسلاسل، والمسافة.
- تعديلات خاصة بالعناصر – انقر على عنصر لتعديل مُضاعف النمو، مُضاعف الانكماش، القاعدة الأساسية، موضع التخطيط الذاتي، والترتيب دون الحاجة إلى البحث في أدوات تطوير.
- عدد عناصر متغير – أضف أو أزل أطفال Flex بين 1 و12 لتمثيل واجهة واجهة حقيقية.
- مخرجات CSS نظيفة – يتم توليد مُختارات العلبة وعناصرها كنص جاهز للنسخ.
- يُشغل بالكامل في المتصفح – لا حاجة لرفع الملف، ولا حاجة لجولة على الشبكة؛ لا يغادر تكوينك الصفحة.
التعليمات
-
ما الفرق بين justify-content و align-items؟
يُحدد justify-content مواقع العناصر على المحور الرئيسي (الاتجاه المحدد بواسطة flex-direction)، بينما يحدد align-items مواقعها على المحور المتعارض. تبديل الاتجاه بين السطر والعمود يعكس أي خاصية تتحكم في التخطيط الأفقي أو العمودي.
-
عند أي وقت يُطبَّق align-content؟
يُطبَّق align-content فقط عندما يسمح flex-wrap بانقسام العناصر إلى عدة سطور. في علبة واحدة (flex-wrap: nowrap)، يتجاهل المتصفح align-content لأن هناك سطرًا واحدًا فقط للتوافق.
-
ما الذي يتحكم فيه flex-grow، flex-shrink، و flex-basis؟
يُحدد flex-basis حجم العنصر الابتدائي على المحور الرئيسي. يُوزع مساحة المتبقي بشكل متناسب على العناصر التي تمتلك قيمة نمو أكبر من 0. يسمح flex-shrink للعناصر بالانكماش تحت القاعدة عند نقص المساحة؛ 0 يعني أن العنصر يحتفظ بحجم القاعدة.
-
هل يمكن أن يُستبدل الترتيب بتعديل التصاميم HTML؟
يُغيّر خاصية الترتيب فقط الموضع البصري — يبقى الترتيب الأصلي في DOM كما هو. هذا يوفر مرونة في التصميم، لكنه قد يضر المستخدمين الذين يُستخدمون مُقرّئات الشاشة إذا تباعد الموضع البصري والقراءة المنطقيّة كثيرًا، لذا استخدمه بحذر في المحتوى المتعلق بالوصول.
-
هل يجب أن أستخدم Flexbox حتى مع وجود CSS Grid؟
يُعدّ Flexbox مُعدًّا للتركيبات ذات الأبعاد الواحدة — سطر أو عمود حيث تُحدد أبعاد العناصر بناءً على محتواها والمساحة المتاحة. يُمتاز Grid في التصميمات ذات الأبعاد المزدوجة مع مسارات محددة. معظم الواجهات الحقيقية تستخدم كلاهما: Grid للهيكل العام للصفحة، وFlexbox للعناصر داخل كل خلية.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
