ملعب CSS Flexbox
جرب خصائص حاوية وعناصر Flexbox في ملعب مرئي مباشر. اضبط الاتجاه والمحاذاة والالتفاف وقيم flex لكل عنصر.
미리보기에서 아이템을 클릭하면 속성을 편집할 수 있습니다.
ما هو ملعب Flexbox؟
ملعب Flexbox هو أداة تفاعلية تتيح لك تجربة خصائص تخطيط CSS Flexbox بشكل مرئي. يمكنك تغيير إعدادات الحاوية مثل الاتجاه والتبرير والمحاذاة، ورؤية كيف تعيد عناصر flex ترتيب نفسها على الفور. يساعد المطورين على تعلم Flexbox أو إنشاء نماذج أولية للتصميمات بسرعة دون كتابة CSS من البداية.
كيفية استخدام ملعب Flexbox
- تعيين خصائص الحاوية — اختر flex-direction و justify-content و align-items و wrap و gap
- إضافة/إزالة العناصر — استخدم الأزرار لإضافة أو إزالة عناصر flex (من 3 إلى 10)
- تحرير خصائص العنصر — انقر فوق أي عنصر لتعيين flex-grow و shrink و basis و order و align-self الخاص به
- رؤية المعاينة — شاهد تحديث التصميم في الوقت الفعلي
- نسخ CSS — انقر فوق نسخ للحصول على CSS الذي تم إنشاؤه لكل من الحاوية والعناصر
لماذا تستخدم ملعب Flexbox هذا؟
- التعلم المرئي — فهم Flexbox من خلال رؤية التغييرات على الفور
- التحكم لكل عنصر — قم بتعيين flex-grow و shrink و basis و order و align-self بشكل فردي
- إخراج CSS نظيف — احصل على CSS مهيأ بشكل جيد يمكنك لصقه مباشرة في مشروعك
- لا يوجد تثبيت — يعمل على الفور في أي متصفح حديث
- الخصوصية — تتم جميع المعالجات محليًا، ولا يتم إرسال أي بيانات إلى أي مكان
FreeToolbox مقابل أدوات Flexbox الأخرى
| الميزة | FreeToolbox | Flexbox Froggy | دليل CSS-Tricks |
|---|---|---|---|
| تفاعلي | محرر كامل | يعتمد على الألعاب | أمثلة ثابتة |
| خصائص لكل عنصر | نعم | محدود | لا |
| تصدير CSS | نعم | لا | لا |
| دعم Gap | نعم | لا | غير متوفر |
| الوضع الداكن | نعم | لا | لا |
الأسئلة الشائعة
كم عدد العناصر التي يمكنني إضافتها؟
يمكنك إضافة ما بين 1 و 10 عناصر flex. كل عنصر مُرمز بالألوان وقابل للتكوين بشكل فردي.
ماذا يفعل flex-grow؟
يحدد flex-grow مقدار المساحة التي يجب أن ينمو بها العنصر بالنسبة إلى العناصر الأخرى عندما تكون هناك مساحة إضافية متاحة. القيمة 0 تعني عدم النمو، و 1 تعني أنه يأخذ حصته من المساحة المتبقية.
ما هو الفرق بين flex-basis و width؟
يحدد flex-basis الحجم الأولي لعنصر flex قبل توزيع المساحة. يعمل على طول المحور الرئيسي (العرض في اتجاه الصف، والارتفاع في اتجاه العمود). على عكس العرض، فإنه يشارك في خوارزمية flex.
هل يمكنني استخدام هذه الأداة للتصميمات سريعة الاستجابة؟
نعم. اجمع بين flex-wrap وقيم flex-basis المستندة إلى النسبة المئوية لإنشاء تصميمات سريعة الاستجابة. يساعدك الملعب على التجربة قبل كتابة CSS النهائي.
هل هذه الأداة مجانية؟
نعم، مجانية تمامًا بدون أي قيود أو تسجيل مطلوب.