justify-content

خاصية توزيع المحور الرئيسي justify-content

خاصية justify-content توزع أبناء حاوية flex أو grid على طول المحور الرئيسي: بداية، وسط، نهاية، أو بمسافات متساوية.

بعد display: flex يأتي السؤال: كيف تتوزع العناصر على طول الصف؟ هذه إجابته: flex-start تراصّهم في البداية، وcenter يجمعهم بالوسط، وspace-between يوزعهم بأقصى تباعد (أول عنصر بأول الحاوية وآخرهم بآخرها) — توزيعة الترويسات الشهيرة: شعار يمين وأزرار يسار.

تذكر التقسيمة مع شقيقتها: justify-content للمحور الرئيسي (الأفقي في الصف الافتراضي)، وalign-items للمحور المتعامد معه.

الصياغة

.container {
  display: flex;
  justify-content: space-between; /* center | flex-start | flex-end | space-around */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .demo { display: flex; background: #ede9fe; border-radius: 10px; padding: 8px; margin-bottom: 8px; }
  .demo span { background: #7c5cff; color: white; padding: 6px 14px; border-radius: 8px; }
  .c { justify-content: center; }
  .sb { justify-content: space-between; }
</style>
<div class="demo c"><span>1</span><span>2</span><span>3</span></div>
<div class="demo sb"><span>1</span><span>2</span><span>3</span></div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
center	تجميع بالوسط — نصف التوسيط في الوصفة الشهيرة
space-between	أقصى تباعد: الأطراف بالحواف والمسافات بينهم متساوية
space-around / space-evenly	مسافات حول كل عنصر / متساوية تمامًا بين الكل
flex-start / flex-end	رصّ في بداية أو نهاية المحور (يحترمان RTL)

💡 نصائح عملية

وصفة التوسيط الكامل الأشهر بالتاريخ: display:flex + justify-content:center + align-items:center
في RTL تنعكس البداية والنهاية تلقائيًا — flex-start يعني اليمين عندك

⚠️ أخطاء شائعة

كتابتها على العنصر الابن بدل الحاوية — هي خاصية حاويات حصرًا
الخلط بينها وبين align-items — الأولى بطول الصف والثانية بعرضه

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs