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