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