أداة Flexbox التفاعلي

Flexbox هو نظام التخطيط الأكثر استخدامًا في CSS الحديثة لترتيب العناصر في صف أو عمود مع تحكّم دقيق في المحاذاة والتوزيع. بدل تخمين القيم، هذه الأداة تتيح لك تجربة كل خاصية مباشرة ومشاهدة أثرها على الصناديق لحظيًا.

حرّك الخصائص في الأداة بالأسفل، وستجد كود CSS يتولّد تلقائيًا جاهزًا للنسخ إلى مشروعك. هذه الطريقة العملية تثبّت المفهوم أسرع بكثير من الحفظ.

جرّب بنفسك

الإعدادات

flex-direction

flex-wrap

justify-content

align-items

gap (px)

عدد العناصر

CSS الناتج

display: flex;

المعاينة

جرّب تغيير الاتجاه والمحاذاة وشاهد الفرق فورًا

متى تستخدم هذه الخاصية؟

استخدم Flexbox عندما تريد ترتيب عناصر في اتجاه واحد (صف أفقي أو عمود رأسي): شريط تنقّل، أزرار متجاورة، توسيط عنصر، أو توزيع بطاقات بمسافات متساوية.

توسيط عنصر أفقيًا ورأسيًا بسطرين فقط
توزيع عناصر شريط التنقّل مع دفع بعضها للأطراف
جعل البطاقات متساوية الارتفاع تلقائيًا

للتخطيطات ثنائية الأبعاد (صفوف وأعمدة معًا) استخدم CSS Grid بدلًا منه.

أمثلة عملية

مثال شائع: توسيط عنصر في منتصف الشاشة تمامًا.

.container {
  display: flex;
  justify-content: center; /* توسيط أفقي */
  align-items: center;     /* توسيط رأسي */
  min-height: 100vh;
}

جرّب تغيير justify-content في الأداة بالأعلى لترى الفرق بين center وspace-between وspace-around مباشرة.