أداة Flexbox التفاعلي
جرّب بنفسك
الإعدادات
CSS الناتج
display: flex;✅ تم النسخ
المعاينة
جرّب تغيير الاتجاه والمحاذاة وشاهد الفرق فورًا
ما هو Flexbox؟
Flexbox (الصندوق المرن) نظام في CSS لترتيب العناصر في سطر واحد — أفقيًا أو رأسيًا — مع تحكّم دقيق في المسافات بينها ومحاذاتها. قبله كان توسيط عنصر رأسيًا أو توزيع أزرار بالتساوي يحتاج حِيَلًا معقّدة؛ ومع Flexbox صار سطرًا أو سطرين.
الفكرة الأساسية: تجعل عنصرًا حاويًا (parent) flex container بكتابة display: flex، فتتحوّل أبناؤه المباشرون إلى عناصر مرنة تنصاع لقواعد التوزيع والمحاذاة التي تحدّدها أنت.
🔑 اربطها بشيء تعرفه
تخيّل رفًّا في مكتبة: الرفّ هو الحاوية (flex container)، والكتب هي العناصر. justify-content يقرّر كيف توزّع الكتب على طول الرف (متلاصقة يمينًا؟ في الوسط؟ متباعدة بالتساوي؟)، وalign-items يقرّر محاذاتها في ارتفاع الرف (أعلى؟ وسط؟ أسفل؟).
متى تستخدمها؟
أشرطة التنقّل (Navbar)
شعار على جهة وروابط على الأخرى، مع مسافات منتظمة بينها.
توسيط عنصر تمامًا
سطران يوسّطان أي عنصر أفقيًا ورأسيًا داخل حاويته.
صفّ أزرار أو بطاقات
توزيع مجموعة عناصر متساوية على سطر واحد بمسافات متساوية.
تخطيط سطر واحد يتجاوب
يلتفّ تلقائيًا في الأسطر عند ضيق الشاشة مع خاصية wrap.
أهم خصائص Flexbox
| الخاصية | ماذا تفعل؟ | قيم شائعة |
|---|---|---|
| display: flex | يُفعّل Flexbox على الحاوية. | flex |
| flex-direction | اتجاه ترتيب العناصر: صفّ أم عمود. | row / column |
| justify-content | توزيع العناصر على المحور الرئيسي (الطول). | center / space-between |
| align-items | محاذاة العناصر على المحور المتقاطع (العرض). | center / stretch |
| gap | المسافة بين العناصر — أنظف من الهوامش. | 8px / 1rem |
| flex-wrap | السماح بالالتفاف على أسطر عند الضيق. | wrap / nowrap |
مثال عملي
شريط تنقّل بسيط: الشعار يمينًا والروابط يسارًا، والكل موسّط رأسيًا:
.navbar {
display: flex;
justify-content: space-between; /* الشعار في جهة، الروابط في الأخرى */
align-items: center; /* توسيط رأسي */
gap: 16px;
}غيّر space-between إلى center فتتجمّع العناصر في الوسط. هذا التغيير الواحد يُغني عن عشرات أسطر الحيل القديمة.
أخطاء شائعة
- 1. الخلط بين المحورين:
justify-contentيعمل على اتجاهflex-direction. إن كان الاتجاهcolumn، فـ justify يتحكّم رأسيًا لا أفقيًا — وهذا يربك الجميع أول مرة. - 2. استعمال الهوامش (margin) للمسافات بدل
gap: ينتج مسافة زائدة على الأطراف.gapيضع المسافة بين العناصر فقط. - 3. تطبيق
display:flexعلى العنصر الخطأ: يجب أن يكون على الحاوية الأب، لا على العناصر نفسها.
كيف تستفيد من الأداة أعلاه؟
بدّل قيم justify-content وalign-items وflex-direction في الأداة أعلاه، وراقب كيف تقفز العناصر إلى أماكنها. جرّب space-between ثم center ثم flex-end — وستفهم المحور الرئيسي في دقيقة واحدة أكثر من ساعة قراءة.
أسئلة شائعة
display:flex; justify-content:center; align-items:center;. ثلاثة أسطر تحلّ المشكلة التي أرّقت مطوّري الويب سنوات.