الأدوات · CSS · معمل Flexbox
معمل Flexbox
أنشئ تخطيط CSS flexbox - الاتجاه والالتفاف والتسوية والمحاذاة والفجوة، ونمو وانكماش وأساس كل عنصر - مع معاينة حيّة، وانسخ الكود.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
كيف تعمل
اختر شكلًا جاهزًا، أو ابدأ من الصف الافتراضي للعناصر.
اضبط عناصر التحكم في الحاوية، ثم اختر عنصرًا لضبط نموه وانكماشه وأساسه الخاص.
انسخ كود CSS الناتج.
أسئلة شائعة
لا. يُبنى التخطيط وكود CSS الناتج بالكامل داخل متصفحك.
تُكتب فقط القيم التي تختلف عن الإعدادات الافتراضية لـCSS، تمامًا كما يكتبها مطوّر يدويًا - العنصر الذي لم يُعدَّل لا يضيف شيئًا إلى الناتج.
يؤثّر هذا فقط في حاوية ملتفّة متعددة الأسطر. فعّل الالتفاف لترى تأثيره.
نعم، وهذا صحيح تمامًا. خاصية flex-direction: row تنعكس تلقائيًا في الاتجاه من اليمين إلى اليسار بلا أي كود إضافي - هذه الأداة تعرض سلوك flexbox الحقيقي، لا تقريبًا يفرض الاتجاه من اليسار إلى اليمين.
التعليقات