الأدوات · CSS · معمل Flexbox
معمل Flexbox
أنشئ تخطيط CSS flexbox - الاتجاه والالتفاف والتسوية والمحاذاة والفجوة، ونمو وانكماش وأساس كل عنصر - مع معاينة حيّة، وانسخ الكود.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اختر شكلًا جاهزًا، أو ابدأ من الصف الافتراضي للعناصر.
اضبط عناصر التحكم في الحاوية، ثم اختر عنصرًا لضبط نموه وانكماشه وأساسه الخاص.
انسخ كود CSS الناتج.
أسئلة شائعة
لا. يُبنى التخطيط وكود CSS الناتج بالكامل داخل متصفحك.
تُكتب فقط القيم التي تختلف عن الإعدادات الافتراضية لـCSS، تمامًا كما يكتبها مطوّر يدويًا - العنصر الذي لم يُعدَّل لا يضيف شيئًا إلى الناتج.
يؤثّر هذا فقط في حاوية ملتفّة متعددة الأسطر. فعّل الالتفاف لترى تأثيره.
نعم، وهذا صحيح تمامًا. خاصية flex-direction: row تنعكس تلقائيًا في الاتجاه من اليمين إلى اليسار بلا أي كود إضافي - هذه الأداة تعرض سلوك flexbox الحقيقي، لا تقريبًا يفرض الاتجاه من اليسار إلى اليمين.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why Flex Items Never End Up the Width You Gave Them
In flexbox, a width is a starting point, not a promise. flex-basis sets where each item begins, then grow and shrink hand out or take back whatever space is left on the line. Once you see that, most surprises stop being surprises.
اقرأ الدليلHow to Make One Flex Item Fill the Remaining Space
A fixed-width sidebar next to a column that takes everything else is two flex properties. Getting it to stay fixed when the window narrows, and stopping long content from breaking it, takes two more. Here is the whole set, built live.
اقرأ الدليلA Flexbox Header Row That Survives Longer Words
Logo on one side, links in the middle, a button on the other: space-between does it in one line. Then the page is translated, the words get longer, and the row overflows. This is how this site's own header handles it.
اقرأ الدليل
التعليقات