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