مولّد Flexbox في CSS

اختر بصريًا خصائص حاوية Flexbox (الاتجاه، المحاذاة، التباعد، الالتفاف) واحصل على كود CSS المطابق، مع معاينة مباشرة.

مثال:

كيف يعمل؟

Flexbox هو نظام التخطيط الأكثر استخدامًا في CSS لمحاذاة العناصر على محور واحد (صف أو عمود). يغنيك هذا المولّد عن حفظ القيم الدقيقة لـ justify-content أو align-items: اضبط القوائم المنسدلة وانسخ كتلة CSS المولّدة مباشرة إلى ملف الأنماط.

ما الفرق بين justify-content وalign-items؟

يقوم justify-content بمحاذاة العناصر على طول المحور الرئيسي (المحدد بواسطة flex-direction)، بينما align-items يحاذيها على طول المحور العمودي عليه (المحور الثانوي).

متى يجب تفعيل flex-wrap؟

فعّله عندما تريد أن تنتقل العناصر إلى سطر جديد عندما لا تتسع داخل عرض الحاوية، بدلًا من ضغطها أو تجاوزها للحدود.

معالجة محلية 100%: يتم إنشاء الكود بالكامل داخل متصفحك عبر WebAssembly.