خاصية اختصار Place Items
آخر تحديث: 2026-09-13
place-items خاصية اختصار Place Items
place-items هو اختصار لـ align-items و justify-items. على حاوية شبكة، يضبط كيفية محاذاة كل عنصر شبكة داخل خليته الخاصة في إعلان واحد. يتحكم في المحاذاة الرأسية (align) والأفقية (justify) في آن واحد، مما يجعله أداة ملائمة لتوسيط أو محاذاة محتوى الشبكة.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
place-items: <align-items> <justify-items>?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<align-items> / <justify-items> | القيمة | اختصار المحاذاة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-items | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： مع قيمة واحدة، يستخدمها كل من align-items و justify-items: place-items: center يوسّط في كلا الاتجاهين.
تلميح： يُضبط place-items على الحاوية ويؤثر على جميع عناصر الشبكة؛ وللتحكم في عنصر واحد، استخدم place-self.
❓ الأسئلة الشائعة
Qما الفرق بين place-items و place-content؟
Aيتحكم place-items في كيفية محاذاة كل عنصر شبكة داخل خليته الخاصة. ويتحكم place-content في كيفية محاذاة منطقة محتوى الشبكة بأكملها داخل الحاوية، وهو ما يهم عندما يكون الحجم الإجمالي للمسارات أصغر من الحاوية. الأول يؤثر في العناصر والثاني في المجموعة، ويمكن ضبطهما معاً دون تعارض. وإذا كانت المسارات تملأ الحاوية بالفعل، فلا شيء لدى place-content لتوزيعه ولا يظهر سوى place-items تأثيراً مرئياً، لأن الخلايا تظل أكبر من محتواها.
Qهل يعمل place-items في flexbox أيضاً؟
Aنعم. place-items صالح في grid و flexbox على حد سواء. في flex يكون مكافئاً لضبط align-items و justify-items في آن واحد، ولكن justify-items لا تأثير له في flex لأن عناصر flex تُرتّب على طول المحور الرئيسي دون خلايا، فتُتجاهل تلك الأجزاء. ولتوسيط الاتجاهين، من الأفضل كتابة align-items: center و justify-content: center صراحةً، وهي الوصفة المعتادة لـ flexbox وتعمل في كل متصفح يدعم flex.
Qما الاتجاهات التي يتحكم فيها القيمتان في place-items: start end؟
Aيقابل القيمة الأولى align-items (رأسياً) والثانية justify-items (أفقياً). يُحاذي place-items: start end العناصر لأعلى رأسياً ولليمين أفقياً. يتطابق هذا الترتيب مع اتفاقية «المحاذاة ثم الضبط» المستخدمة في عائلة place-* بأكملها، والقيمة الواحدة تنطبق دائماً على كلا المحورين، لذا يوسّط place-items: center أفقياً ورأسياً — وهي الطريقة الأكثر شيوعاً لتوسيط محتوى الشبكة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
Place Content
يتحكم في كيفية محاذاة الشبكة بأكملها داخل الحاوية
Place Self
يتحكم في محاذاة عنصر شبكة واحد
