خاصية align-items
آخر تحديث: 2026-09-13
align-items خاصية align-items
تُعرّف الخاصية align-items محاذاة جميع عناصر flex على المحور المتقاطع، وتتحكم في موضعها في الاتجاه العمودي على المحور الرئيسي. قيمتها الافتراضية هي stretch، ما يجعل العناصر تتمدد لملء ارتفاع الحاوية على طول المحور المتقاطع. تُستخدم هذه الخاصية عادةً للتوسيط الرأسي ومحاذاة الأطراف العلوية والسفلية وخط الأساس.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
align-items: normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | stretch | flex-start | flex-end | center | baseline | كلمة مفتاحية | المحاذاة على المحور المتقاطع |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| align-items | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يؤدي الجمع بين justify-content: center و align-items: center إلى توسيط عناصر flex أفقيًا ورأسيًا — وهي من أكثر طرق التوسيط شيوعًا في flexbox.
تحذير： تجعل القيمة baseline العناصر تتماشى على خطوط أساس النص الخاصة بها، وهو أمر مفيد عندما تختلف أحجام الخطوط. أما إذا لم يكن للعنصر محتوى نصي، فتُعامل حافته السفلية كخط أساس، ما قد يؤدي إلى نتائج غير متوقعة.
❓ الأسئلة الشائعة
Qما الفرق بين align-items و align-self؟
Aيُحدَّد align-items على حاوية flex ويمنح جميع العناصر الفرعية نفس المحاذاة على المحور المتقاطع. أما align-self فيُحدَّد على عنصر flex واحد ويتجاوز افتراضي الحاوية لذلك العنصر فقط، وهو بالضبط ما تحتاجه عندما يجب أن يبرز عنصر واحد بينما يحتفظ الباقون بمحاذاة الحاوية. ويكون لـ align-self أولوية أعلى دائمًا من align-items. وينطبق نفس الأمر على الزوج justify-items و justify-self، حيث تكون العلاقة بين افتراضي الحاوية وتجاوز كل عنصر على حدة.
Qلماذا لا يُوسّط align-items: center عناصري عموديًا؟
Aيعمل align-items على المحور المتقاطع. فإذا لم تكن للحاوية ارتفاع صريح وتحدَّد ارتفاعها بالمحتوى، فلا يوجد فراغ متبقٍ على المحور المتقاطع، ولا تظهر التوسيط. ومن المزالق الشائعة: مع القيمة الافتراضية align-items: stretch وبدون ارتفاع للحاوية، يبدو أن التوسيط لا يفعل شيئًا لأن المحور المتقاطع لا يملك فراغًا متبقيًا للعمل ضمنه. أعطِ الحاوية ارتفاعًا محددًا، مثل height: 200px. ولتوسيط المحور الرئيسي في الوقت نفسه، أضف justify-content: center.
Qلماذا لا يعمل align-items: stretch؟
Aلا يسري stretch إلا عندما لا يكون للعناصر حجم صريح على المحور المتقاطع. فمع محور رئيسي من نوع row، إذا حدد عنصر ما الارتفاع height، يُتجاوز stretch ويُرسم العنصر بارتفاعه الخاص. وبالمثل، إذا لم تكن للحاوية حجم محدد على المحور المتقاطع، فلا يوجد ما يتمدد إليه. ولجعل stretch يعمل، أبقِ حجم العناصر على المحور المتقاطع عند auto وأعطِ الحاوية حجمًا محددًا في ذلك الاتجاه.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
Align Self
يتجاوز محاذاة عنصر واحد على المحور المتقاطع.
المحاذاة على المحور الرئيسي
يتحكم في كيفية محاذاة العناصر على المحور الرئيسي.
