align-items

خاصية محاذاة المحور المتعامد align-items

خاصية align-items تحاذي أبناء حاوية flex/grid على المحور المتعامد — رأسيًا في الصف الافتراضي: أعلى، وسط، أسفل، أو تمدد.

النصف الثاني من ثنائي المحاذاة: بينما توزع justify-content العناصر بطول الصف، تضبط align-items ارتفاعها فيه — center يوسطها رأسيًا (نصف وصفة التوسيط الأسطورية)، وstretch الافتراضية تمددها لملء ارتفاع الحاوية، وbaseline يحاذي خطوط قواعد النصوص بأحجام مختلفة.

ولضبط عنصر واحد فقط بمحاذاة مختلفة عن إخوته: align-self عليه هو.

الصياغة

.container {
  display: flex;
  align-items: center; /* stretch | flex-start | flex-end | baseline */
}

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<style>
  .demo { display: flex; align-items: center; gap: 10px; height: 90px; background: #ede9fe; border-radius: 10px; padding: 0 12px; }
  .demo .tall { padding: 18px 14px; } .demo span { background: #7c5cff; color: white; padding: 8px 14px; border-radius: 8px; }
</style>
<div class="demo">
  <span>قصير</span><span class="tall">طويل</span><span>قصير</span>
</div>
<p>الثلاثة متوسطون رأسيًا رغم اختلاف أحجامهم.</p>

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

أهم القيم

القيمة	الوظيفة
center	توسيط رأسي — الأكثر استخدامًا بمراحل
stretch	الافتراضية: تمدد الأبناء لملء ارتفاع الحاوية
flex-start / flex-end	محاذاة لأعلى / لأسفل الصف
baseline	محاذاة خطوط قاعدة النصوص — لعناصر بأحجام خط مختلفة

💡 نصائح عملية

أيقونة بجانب نص لا يتوسطان؟ display:flex + align-items:center على أبيهما — حل ثوانٍ
عنصر واحد يخالف المجموعة؟ align-self عليه بدل تغيير الحاوية

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

الخلط الأزلي مع justify-content — تذكر: justify بطول المحور، align بعرضه
استغراب «لماذا أبنائي بنفس الارتفاع؟» — إنها stretch الافتراضية

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

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