مولد Flexbox
معاينة حية
لماذا تستخدم مولد Flexbox مرئي؟
يحتوي CSS Flexbox على العديد من الخصائص المتداخلة - الاتجاه، والمحاذاة، والالتفاف - وقد يكون تفاعلها محيراً. يتيح لك المولد المرئي الخاص بنا ضبط كل خاصية وشغل معاينة حية في الوقت الفعلي، مما يجعلها أسرع وسيلة لتعلم Flexbox وبناء التخطيطات دون الحاجة للتجربة والخطأ المتكرر.
معاينة مرئية حية
شاهد تماماً كيف يتصرف تخطيط Flexbox الخاص بك عند تغيير كل خاصية - لا مجال للتخمين.
تغطية كامل الخصائص
يغطي الاتجاه، والمحاذاة الأفقية والرأسية، والالتفاف، والفجوات في واجهة واحدة.
مخرج CSS جاهز
ينسخ كود container. ونظيف جاهز للصقه في ملف التنسيق الخاص بك.
كيف تبني تخطيط Flexbox
اضبط الاتجاه والالتفاف
اختر الاتجاه (صف أو عمود) والالتفاف للتحكم في المحور الرئيسي وتجاوز العناصر.
محاذاة العناصر
اضبط justify-content و align-items للتحكم في كيفية توزيع العناصر ومحاذاتها.
نسخ الكود
انقر على 'نسخ كود CSS' للحصول على الكود الكامل الجاهز لمشروعك.
حالات استخدام Flexbox
أشرطة التنقل
مثالي لأشرطة التنقل الأفقية - استخدم space-between لتوزيع الشعار والروابط.
شبكات البطاقات
استخدم flex-wrap لإنشاء شبكات بطاقات متجاوبة تلتف تلقائياً على الشاشات الصغيرة.
توسيط مثالي
أسرع طريقة لتوسيط أي عنصر أفقياً ورأسياً بدقة متناهية.
تخطيطات النماذج
حاذِ تسميات النماذج وحقول الإدخال بشكل متسق ونظيف باستخدام Flexbox.
أفضل ممارسات Flexbox
✓ افهم المحور الرئيسي والمحور المتقاطع
تتحكم justify-content في المحور الرئيسي، بينما تتحكم align-items في المحور المتقاطع. يتبادلان الأدوار عند تغيير الاتجاه لعمود.
✓ استخدم flex: 1 للعناصر المرنة
إضافة flex: 1 للعنصر الابن تجعله يتمدد لملء المساحة المتاحة.
✓ استخدم gap بدلاً من الهوامش
توفر خاصية gap مسافات متسقة بين العناصر دون إضافة هوامش خارجية غير مرغوبة.
✓ استخدم Grid للتخطيطات ثنائية الأبعاد
يتحكم Flexbox في محور واحد (صف أو عمود). للتخطيطات المعقدة التي تتطلب التحكم في كليهما، استخدم CSS Grid.
❓ الأسئلة الشائعة
متى أستخدم Flexbox ومتى أستخدم CSS Grid؟
Flexbox هو الأفضل للتخطيطات أحادية البعد (مثل أشرطة التنقل). أما CSS Grid فيتفوق في التخطيطات ثنائية الأبعاد حيث تحتاج للتحكم في الصفوف والأعمدة معاً.
ماذا تفعل خاصية flex-wrap: wrap؟
بشكل افتراضي، تُجبر العناصر على سطر واحد. تسمح هذه الخاصية للعناصر بالانتقال لسطر جديد عند ضيق المساحة، وهو أمر حيوي للتصميم المتجاوب.
ما الفرق بين align-items و align-content؟
تتحكم align-items في محاذاة العناصر داخل الصف الواحد، بينما تطبق align-content عندما يكون هناك عدة صفوف لتتحكم في توزيعها داخل الحاوية.
كيف أجعل الأعمدة متساوية العرض؟
قم بتطبيق flex: 1 على كل عنصر ابن. هذا يضمن تمدد جميع العناصر بالتساوي لملء المساحة.