ویژگی place-content CSS

تعریف و کاربرد

place-content ویژگی‌ها برای چیدمان انعطاف‌پذیر (flexbox) و شبکه (grid) استفاده می‌شوند و اختصاری ویژگی‌های زیر هستند:

اگر ویژگی 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
نوع جاوااسکریپت: object.style.placeContent="end space-around"

پشتیبانی مرورگرها

اعداد در جدول نشان‌دهنده‌ی نسخه‌ی اولین مرورگر پشتیبانی‌کننده از این ویژگی هستند.

Chrome Edge Firefox Safari opera
59.0 79.0 53.0 11.0 46.0

صفحات مرتبط

آموزش:طرح شبکه‌ی CSS

آموزش:طرح شبکه‌ی انعطاف‌پذیر CSS

مطالعه:خصوصیت align-content CSS

مطالعه:ویژگی CSS justify-content

مطالعه:ویژگی alignContent HTML DOM