مولّد CSS Flexbox

حول هذه الأداة

يتيح لك مولد CSS Flexbox ضبط flex-direction وjustify-content وalign-items وflex-wrap وalign-content وgap على الحاوية، ومعاينة حتى 20 عنصرًا مباشرة، ونسخ كود CSS الناتج.

طريقة الاستخدام

1. اختر الاتجاه والالتفاف.
2. اضبط justify-content وalign-items (وalign-content للأسطر الملتفة).
3. حدد gap وعدد عناصر المعاينة.
4. انقر Copy CSS لاستخدام قواعد الحاوية.

معلومات مفيدة

• تحاذي justify-content العناصر على المحور الرئيسي، بينما تحاذيها align-items على المحور المتقاطع.
• تبدّل flex-direction: column المحورين، فتعمل justify-content عندئذ عموديًا.
• لا يكون لـ align-content أي تأثير إلا عندما تلتف العناصر على عدة أسطر.
• تعمل خاصية gap مع Flexbox في جميع المتصفحات الرئيسية الحالية.
• ‏Flexbox أحادي البعد؛ استخدم CSS Grid للتحكم في الصفوف والأعمدة معًا.

تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.

الأسئلة الشائعة