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