ما الفرق بين justify-content و align-items في Flexbox؟ دليل عملي شامل لمطوري الويب
تُعد تقنية Flexbox واحدة من أهم الأدوات الحديثة في CSS لبناء واجهات مستخدم مرنة وسريعة الاستجابة. لكن رغم بساطتها الظاهرية، يقع الكثير من المطورين في لبس عند استخدام خصائص المحاذاة، خصوصًا justify-content و align-items.
في هذا المقال، سنوضح الفرق بينهما بشكل عملي وبسيط، مع أمثلة واقعية تساعدك كمطور ويب على استخدامهما بشكل احترافي دون تعقيد.
ما هو Flexbox ولماذا نستخدمه؟
Flexbox هو نظام تخطيط (Layout System) يُستخدم لترتيب العناصر داخل حاوية (Container) بطريقة مرنة.
أهم مميزاته:
- توزيع العناصر بسهولة
- التحكم في المحاذاة أفقيًا ورأسيًا
- تصميم متجاوب بدون تعقيد
- تقليل الاعتماد على float و positioning
المحور الرئيسي والمحور العرضي في Flexbox
لفهم الفرق بين justify-content و align-items، يجب أولًا فهم مفهومين أساسيين:
المحور الرئيسي (Main Axis)
هو الاتجاه الأساسي الذي تتحرك فيه العناصر داخل الحاوية.
المحور العرضي (Cross Axis)
هو الاتجاه العمودي على المحور الرئيسي.
💡 مهم جدًا:
- إذا كان الاتجاه
row→ المحور الرئيسي أفقي - إذا كان الاتجاه
column→ المحور الرئيسي رأسي
ما هي خاصية justify-content؟
تُستخدم خاصية justify-content للتحكم في توزيع العناصر على المحور الرئيسي.
ببساطة:
👉 تتحكم في "المسافات بين العناصر" أفقيًا أو رأسيًا حسب اتجاه الفليكس
أشهر القيم:
flex-start→ العناصر في بداية الحاويةflex-end→ العناصر في نهاية الحاويةcenter→ العناصر في المنتصفspace-between→ مسافات متساوية بين العناصرspace-around→ مسافات حول العناصرspace-evenly→ مسافات متساوية تمامًا
مثال عملي:
تخيل عندك navbar فيه 3 عناصر:
- لو استخدمت
justify-content: space-between
👉 أول عنصر هيكون في أقصى اليسار، وآخر عنصر في أقصى اليمين، والباقي بينهم.
ما هي خاصية align-items؟
تُستخدم خاصية align-items للتحكم في محاذاة العناصر على المحور العرضي.
ببساطة:
👉 تتحكم في "ارتفاع أو تمركز العناصر" عموديًا أو أفقيًا حسب الاتجاه
أشهر القيم:
flex-start→ العناصر في أعلى الحاويةflex-end→ العناصر في أسفل الحاويةcenter→ العناصر في المنتصفstretch→ العناصر تتمدد لملء الحاويةbaseline→ محاذاة حسب خط النص
مثال عملي:
عندك مجموعة كروت داخل div:
- باستخدام
align-items: center
👉 كل الكروت هتكون في منتصف الحاوية عموديًا
الفرق بين justify-content و align-items
الفرق الأساسي يعتمد على اتجاه المحور:
| الخاصية | تتحكم في | الاتجاه |
|---|---|---|
| justify-content | توزيع العناصر | المحور الرئيسي |
| align-items | محاذاة العناصر | المحور العرضي |
جدول مقارنة شامل
| الميزة | justify-content | align-items |
|---|---|---|
| نوع التحكم | توزيع العناصر | محاذاة العناصر |
| المحور | المحور الرئيسي (Main Axis) | المحور العرضي (Cross Axis) |
| يتأثر بـ flex-direction | نعم | نعم |
| الاستخدام الشائع | عمل مسافات بين العناصر | توسيط العناصر عموديًا/أفقيًا |
| مثال عملي | توزيع عناصر navbar | توسيط عناصر داخل container |
متى تستخدم كل خاصية؟
استخدم justify-content عندما:
- تريد توزيع العناصر داخل الحاوية
- تحتاج مسافات متساوية بين العناصر
- تعمل على navbar أو قائمة أفقية
استخدم align-items عندما:
- تريد توسيط العناصر عموديًا
- تريد ضبط ارتفاع العناصر داخل container
- تعمل على تصميم cards أو sections
أمثلة واقعية من مشاريع حقيقية
1. شريط التنقل (Navbar)
- استخدم
justify-content: space-between
👉 لتوزيع اللوجو والقائمة
2. توسيط زر داخل قسم
- استخدم
justify-content: center+align-items: center
👉 لتوسيط الزر أفقيًا وعموديًا
3. تصميم كروت (Cards)
- استخدم
align-items: stretch
👉 لجعل كل الكروت بنفس الارتفاع
أخطاء شائعة يجب تجنبها
❌ الخلط بين المحورين
✔ الحل: دائمًا اسأل نفسك: "أنا عايز أتحكم في أنهي اتجاه؟"
❌ نسيان flex-direction
✔ لأن الاتجاه يغير المحور بالكامل
❌ استخدام خاصية واحدة بدل الاثنين
✔ أحيانًا تحتاج الاثنين معًا للتوسيط الكامل
نصائح احترافية لمطوري الويب
- دائمًا تخيل المحور قبل كتابة أي خاصية
- استخدم أدوات DevTools لمعاينة Flexbox
- جرّب القيم المختلفة لفهم التأثير بصريًا
- لا تحفظ القيم فقط… افهم المنطق
الأسئلة الشائعة (FAQ)
1. ما الفرق الأساسي بين justify-content و align-items؟
الفرق أن justify-content يتحكم في توزيع العناصر على المحور الرئيسي، بينما align-items يتحكم في محاذاتها على المحور العرضي.
2. هل يمكن استخدام justify-content و align-items معًا؟
نعم، وغالبًا يتم استخدامهما معًا لتوسيط العناصر أفقيًا وعموديًا في نفس الوقت.
3. هل يتغير سلوك الخصائص مع flex-direction؟
نعم، لأن تغيير الاتجاه يغير المحور الرئيسي والعرضي.
4. متى أستخدم align-items بدل justify-content؟
عندما تريد التحكم في الاتجاه العمودي (أو العرضي حسب الاتجاه)، وليس توزيع العناصر.
5. هل Flexbox أفضل من Grid؟
Flexbox مناسب للمحاور الواحدة (1D)، بينما Grid أفضل للتصميمات الثنائية الأبعاد (2D).
🚀 البداية في إيدك
كل اللي محتاجه منك:
- التزام
- مذاكرة
- وصبر
ومع النظام الصح…
هتوصل لنفس النتيجة اللي وصلها مبرمجين كتير بدأوا من الصفر
ودلوقتي شغالين في المجال 💪
🚀 ابدأ رحلتك مع كرياتيفو
وخد أول خطوة حقيقية نحو مستقبلك في البرمجة
📱 ابعتلنا علي واتساب
💬 ابعتلنا علي فيسبوك
