🎯 دليلك الشامل لاستخدام justify-content في CSS

اليوم سنتعلم واحدة من أهم الخصائص في CSS Flexbox التي تمنحك تحكماً كاملاً في توزيع العناصر داخل الحاوية المرنة. إذا كنت تريد إنشاء تخطيطات متجاوبة وجذابة، فأنت في المكان الصحيح! 🚀

📚 ما هي خاصية justify-content؟

justify-content هي خاصية CSS تُطبق على الحاوية المرنة (Flex Container) لتتحكم في المحور الرئيسي (Main Axis). ببساطة، تحدد هذه الخاصية كيفية توزيع المساحة الفارغة بين العناصر الموجودة داخل الحاوية وعلى جانبيها.

.container {
  display: flex;
  justify-content: قيمة_التوزيع;
}

تذكر: justify-content تعمل فقط عندما يكون هناك مساحة فارغة في الحاوية لتوزيعها!

🎪 قيم خاصية justify-content الأساسية

لنستعرض معاً القيم الرئيسية لـ justify-content مع أمثلة عملية لكل قيمة:

1. flex-start (القيمة الافتراضية) 📍

تجمع العناصر في بداية المحور الرئيسي. إذا كان اتجاه الحاوية من اليسار لليمين (row)، فستتجمع العناصر على اليسار.

.container {
  display: flex;
  justify-content: flex-start;
  /* العناصر تتجمع في البداية */
}

2. flex-end 🏁

تجمع العناصر في نهاية المحور الرئيسي. في الاتجاه الأفقي، ستتجمع العناصر على اليمين.

.container {
  display: flex;
  justify-content: flex-end;
  /* العناصر تتجمع في النهاية */
}

3. center 🎯

توسّط العناصر على طول المحور الرئيسي. هذه القيمة مفيدة جداً لتوسيط العناصر أفقياً.

.container {
  display: flex;
  justify-content: center;
  /* العناصر تتوسط الحاوية */
}

📏 قيم التوزيع المتقدمة

4. space-between ⚖️

توزع العناصر بالتساوي على طول المحور الرئيسي، حيث يلتصق العنصر الأول بالبداية والعنصر الأخير بالنهاية.

.container {
  display: flex;
  justify-content: space-between;
  /* المساحة تتوزع بين العناصر فقط */
}

5. space-around 🔄

توزع العناصر بالتساوي مع مساحة متساوية على جانبي كل عنصر. لاحظ أن المسافة بين العناصر ضعف المسافة من الحواف.

.container {
  display: flex;
  justify-content: space-around;
  /* مساحة متساوية حول كل عنصر */
}

6. space-evenly 📐

توزع العناصر بالتساوي مع مسافة متساوية تماماً بين جميع العناصر والحواف.

.container {
  display: flex;
  justify-content: space-evenly;
  /* مسافات متساوية تماماً بين كل شيء */
}

💡 مثال عملي شامل

لنطبق ما تعلمناه في مثال واقعي. تخيل أن لديك شريط تنقل (navbar) تريد توزيع عناصره:

<nav class="navbar">
  <div>الرئيسية</div>
  <div>من نحن</div>
  <div>الخدمات</div>
  <div>اتصل بنا</div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* توزيع العناصر مع مسافة بينها */
  background-color: #f0f0f0;
  padding: 1rem;
}

.navbar div {
  padding: 0.5rem 1rem;
  background-color: #4CAF50;
  color: white;
}

في هذا المثال، ستتوزع عناصر القائمة بشكل متساوٍ مع مسافة بينها، مما يخلق مظهراً احترافياً لشريط التنقل.

🚀 نصائح عملية مهمة

  1. تأكد من وجود مساحة فارغة: justify-content لن تعمل بشكل ملحوظ إذا كانت الحاوية ممتلئة بالعناصر.
  2. الفرق بين المحورين: تذكر أن justify-content تتحكم في المحور الرئيسي، بينما align-items تتحكم في المحور المتقاطع.
  3. التجريب هو المفتاح: جرب القيم المختلفة لترى تأثيرها بنفسك!

🧩 تمارين تطبيقية

جرب هذه التعديلات على المثال السابق:

  • غير justify-content إلى center ولاحظ كيف تتوسط العناصر
  • جرب space-around وشاهد الفرق في توزيع المسافات
  • استخدم flex-end لتحريك العناصر إلى أقصى اليمين

ماذا سنتعلم في الدرس القادم؟ 🔮

الآن وقد أتقنت توزيع العناصر على المحور الرئيسي باستخدام justify-content، حان الوقت لتعلم التحكم في المحور المتقاطع! في الدرس القادم سنتعمق في خاصية align-items التي تمكنك من محاذاة العناصر عمودياً داخل الحاوية المرنة. استعد لاكتشاف عالم جديد من إمكانيات التخطيط!