المستخدمة مؤخرًا

    افتح أداة وستظهر هنا.

    ساحة تجربة CSS Flexbox

    ساحة تفاعلية لتعلم تخطيطات Flexbox وتوليدها

    مشاركة هذه الأداة

    الإبلاغ عن مشكلة

    صف المشكلة دون تضمين مدخلات أو ملفات خاصة.

    ما مدى فائدة هذه الأداة؟

    ما مدى فائدة هذه الأداة؟

    إعدادات التخطيط

    تخطيطات جاهزة

    تجاوزات لكل عنصر

    حدد عنصرًا في المعاينة أو في القائمة لتعديل خصائصه.

    مرجع سريع لـ Flexbox

    المحور الرئيسي

    تتحكم الخاصية justify-content في المحاذاة على امتداد المحور الرئيسي (الذي يحدده flex-direction).

    المحور العرضي

    تتحكم الخاصية align-items في المحاذاة على امتداد المحور العرضي (المتعامد مع flex-direction).

    الأسطر المتعددة

    لا تعمل الخاصية align-content إلا عند ضبط flex-wrap على wrap أو wrap-reverse مع وجود عدة أسطر.

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

    شيفرة CSS المولّدة

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

    غيّر الإعدادات أو حدد عنصرًا. تتحدث المعاينة وشيفرة CSS معًا.

    عن ساحة تجربة CSS Flexbox

    ساحة تجربة CSS Flexbox أداة بصرية تفاعلية لتعلم تخطيطات CSS Flexbox وتجربتها. يُعد Flexbox (Flexible Box Layout) من أقوى وحدات التخطيط في CSS وأكثرها استخدامًا، وهو مصمم لترتيب العناصر داخل حاوية بسلوك مرن ومتجاوب. تتيح لك هذه الأداة التحكم في كل خصائص حاوية flex وعناصرها في الوقت الفعلي ومشاهدة تغير التخطيط بدقة.

    التصميم

    أضيفت حديثًا

    كل الأدوات

    إعدادات الخصوصية

    اختر تفضيلاتك للتحليلات والإعلانات والتخصيص. يُبقي التخزين الأساسي ميزات مثل المظهر والأدوات المحفوظة تعمل.

    التخزين الأساسي مفعّل دائمًا.