ملعب CSS Flexbox

قم بتكوين خصائص حاوية وعناصر CSS flexbox بشكل مرئي مع معاينة مباشرة. أنشئ كود CSS جاهز للاستخدام لـ flex-direction وjustify-content وalign-items والمزيد.

الإعدادات المسبقة

خصائص الحاوية

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 8px

خصائص العنصر

flex-grow

flex-shrink

flex-basis

align-self

order

معاينة مباشرة

CSS الحاوية

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

CSS العناصر

.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

Phone Number Formatter

Border Radius Generator

أدوات ذات صلة

Grid Layout Designer

CSS Animation Generator

Box Shadow Generator

Gradient Generator

NEW!

Glassmorphism Generator

UI Color Accessibility Checker

Color Scheme Generator

Pure Color Image Generator

Share this tool

Help others discover CSS Flexbox Playground

حول ملعب CSS Flexbox

كيف يعمل

اضبط خصائص الحاوية مثل flex-direction وflex-wrap وjustify-content وalign-items وalign-content
أضف ما يصل إلى 6 عناصر flex وكوّن كل منها بشكل مستقل باستخدام flex-grow وflex-shrink وflex-basis وalign-self وorder
شاهد تخطيطك في الوقت الفعلي عند تغيير أي خاصية
انسخ CSS الحاوية والعناصر المُنشأ مباشرةً إلى مشروعك
استخدم الإعدادات المسبقة لاستكشاف أنماط flexbox الشائعة بسرعة

حالات الاستخدام الشائعة

تعلم خصائص تخطيط flexbox بشكل تفاعلي
تصميم نماذج أولية لأشرطة التنقل وشبكات البطاقات والأشرطة الجانبية
تصحيح مشكلات المحاذاة الصعبة في flexbox
إنشاء كود CSS أساسي لأنماط التخطيط الشائعة
تدريس مفاهيم CSS flexbox للطلاب

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

ما هو ملعب CSS Flexbox؟

ملعب CSS Flexbox هو أداة تفاعلية تتيح لك تكوين جميع خصائص حاوية وعناصر flexbox بشكل مرئي. تظهر التغييرات فوراً في المعاينة المباشرة ويتم إنشاء كود CSS جاهز للاستخدام تلقائياً.

ما خصائص الحاوية التي يمكن تكوينها؟

يمكنك تكوين جميع خصائص حاوية flex الست الرئيسية: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around) و gap (قيمة بكسل).

ما الخصائص التي يمكن تكوينها لكل عنصر flex؟

يمكن تكوين كل عنصر flex باستخدام: flex-grow (مقدار المساحة الإضافية التي يأخذها العنصر), flex-shrink (مقدار انكماش العنصر عند ضيق المساحة), flex-basis (الحجم الأولي), align-self (تجاوز المحاذاة الفردية) و order (الترتيب المرئي في الحاوية).

كم عدد عناصر flex التي يمكنني إضافتها؟

يمكنك إضافة ما يصل إلى 6 عناصر flex. انقر على زر '+ إضافة عنصر' لإضافة المزيد. كل عنصر له رمز لوني لتمييزه بسهولة في المعاينة ولوحة الإعدادات.

كيف أحدد وأعدل عنصر flex محدداً؟

انقر على أي علامة تبويب مرقمة في أعلى لوحة خصائص العنصر لتحديده. يمكنك أيضاً النقر مباشرة على عنصر في المعاينة المباشرة. سيتم تمييز العنصر المحدد بإطار ملون.

ما هي الإعدادات المسبقة وكيف أستخدمها؟

الإعدادات المسبقة هي تكوينات flexbox جاهزة لأنماط التخطيط الشائعة: 'صف مركزي' يمركز العناصر أفقياً وعمودياً، 'عمود مركزي' يرتب العناصر عمودياً في المنتصف، 'مسافة بينية' يوزع العناصر بالتساوي، 'شبكة ملتفة' يستخدم flex-wrap للتفاف العناصر، 'عناصر ممتدة' يستخدم flex-grow لملء المساحة، 'صف معكوس' يعكس ترتيب العرض. انقر على الإعداد المسبق لتطبيقه فوراً.

ماذا يفعل flex-grow؟

flex-grow يحدد مقدار نمو عنصر flex نسبة إلى العناصر الأخرى عندما تكون هناك مساحة إضافية في الحاوية. القيمة 0 تعني عدم النمو. القيمة 1 تعني حصة متساوية من المساحة الإضافية. القيمة 2 تعني ضعف مساحة عنصر بـ flex-grow: 1.

ماذا يفعل flex-shrink؟

flex-shrink يحدد مقدار انكماش عنصر flex نسبة إلى العناصر الأخرى عند نقص المساحة. القيمة 0 تمنع الانكماش. القيمة 1 (الافتراضية) تعني الانكماش التناسبي. القيمة 2 تعني الانكماش بضعف السرعة.

ما القيم التي يمكن أن يقبلها flex-basis؟

flex-basis يحدد الحجم الأولي لعنصر flex قبل توزيع المساحة الحرة. يقبل: 'auto' (يستخدم عرض أو ارتفاع العنصر)، قيمة طول مثل '100px' أو '20%'، 'content' (بناءً على المحتوى) أو '0' (يبدأ العنصر من حجم صفري).

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

align-items خاصية الحاوية التي تنطبق على جميع عناصر flex بشكل افتراضي. align-self تتجاوز align-items لعنصر فردي. مثلاً إذا كانت الحاوية تحمل align-items: center لكن عنصراً واحداً يحمل align-self: flex-end، ستكون جميع العناصر في المنتصف إلا ذلك العنصر.

ماذا تفعل خاصية order؟

خاصية order تتحكم في الترتيب المرئي لعناصر flex دون تغيير ترتيب DOM. العناصر ذات قيمة order الأصغر تظهر أولاً. القيمة الافتراضية هي 0.

كيف أنسخ CSS المُنشأ؟

هناك زرا نسخ: أحدهما لـ CSS الحاوية والآخر لجميع CSS. انقر على أي زر 'نسخ CSS' لنسخ الكود إلى الحافظة.