خصائص place-content CSS

الصفحة السابقة perspective-origin
الصفحة التالية place-items

التعريف والاستخدام

place-content تستخدم الخاصية هذه في تصميم الحزم المرونة (flexbox) والشبكة (grid) كاختصار لأحداث التالي:

align-content
justify-content

إذا كان لديك قيمتين لخاصية place-content:

place-content: start center;

قيمة الخاصية align-content هي 'start'
قيمة الخاصية justify-content هي 'center'

إذا كان لديك قيمة واحدة فقط لخاصية place-content:

place-content: end;

ثم قيم الخاصيتين align-content و justify-content تكون 'end'

مثال

مثال 1

تحديد السعة المرونة في قاع الحاوية المرونة وتساوي المسافات بين العناصر المرونة في الاتجاه الأفقي:

#container {
  display: flex;
  place-content: end space-between;
}

تجربة بنفسك

مثال 2: تخطيط الشبكة

المساحة الإضافية في الاتجاه الكتلي توزعت بشكل متساوٍ حول كل عنصر الشبكة، ويتحرك كل عنصر الشبكي في الاتجاه الداخلي في منتصف السطر:

#container {
  display: grid;
  place-content: space-around center;
}

تجربة بنفسك

قواعد النص CSS

place-content: normal|value|initial|inherit;

قيمة الخاصية

القيمة	الوصف
normal	القيمة الافتراضية. يعتمد على سياق التخطيط. مثل عدم ضبط قيم align-content و justify-content.
stretch	شبكة: إذا لم يتم تحديد حجم العنصر الشبكي، فإنه يتم تمدده لملء صندوق الشبكة. صندوق المرونة: إذا لم يتم تحديد حجم العنصر المرونق على محور التداخل، فإنه يتم تمدده على محور التداخل لملء صندوق المرونة.
start	ضبط العناصر إلى بداية العنصر.
end	ضبط العناصر إلى نهاية العنصر.
center	ضبط العناصر إلى مركز العنصر.
space-between	توزيع المساحة المتاحة على محوري العنصر، بحيث تكون المسافة بين العناصر متساوية.
space-around	توزيع المساحة المتاحة على محوري العنصر، بحيث تكون المسافة حول كل عنصر متساوية.
space-evenly	توزيع العناصر بشكل متساوٍ على محوري العنصر.
overflow-alignment	'safe'：إذا كان المحتوى يتجاوز الحجم، فضع توازن العنصر على 'start'. 'unsafe'：لا تتغير قيم التوازن مهما كان محتوى العنصر يتجاوز الحجم.
initial	ضع الخاصية عند قيمتها الافتراضية. انظر initial.
inherit	يرث هذا الخاصية من عنصر الأب. انظر inherit.

تفاصيل التقنية

القيمة الافتراضية:	normal
التنسيق الوراثي:	لا
صنع الرسوم المتحركة:	غير مدعوم. انظر:خصائص الرسوم المتحركة.
الإصدار:	CSS3
جافا سكربت Syntax:	object.style.placeContent="end space-around"