CSS place-content کا پراپرٹی

تعریف و استعمال

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|مقدار|initial|inherit;

مقدار ویژگی

مقدار توضیح
معمولی

مقدار پیش‌فرض. بستگی به محیط لائؤت دارد.

معادل نگذاشتن تنظیمات属性 align-content و justify-content است.

کشیدن

گرید: اگر اندازه تعیین نشده باشد، پروژه‌های گرید کشیده می‌شوند تا ظرفیت گرید بگا میٹر را پر کنند.

ایکسلایو بگا میٹر: اگر پروژه‌های انعطاف‌پذیر در محور عمودی تعیین نشده‌اند، در محور عمودی کشیده می‌شوند تا ظرفیت بگا میٹر را پر کنند.

شروع پروژه‌ها را به شروع ظرفیت نزدیک می‌کند.
انتهاء پروژه‌ها را به انتهای ظرفیت نزدیک می‌کند.
مرکز پروژه‌ها را به مرکز ظرفیت نزدیک می‌کند.
space-between فضای قابل استفاده را در دو محور ظرفیت به یکسان توزیع می‌کند تا فاصله بین پروژه‌ها برابر باشد.
space-around فضای قابل استفاده را در دو محور ظرفیت به یکسان توزیع می‌کند تا فاصله اطراف هر پروژه برابر باشد.
space-evenly پروژه‌ها را در دو محور ظرفیت به یکسان توزیع می‌کند.
overflow-alignment

'safe' : اگر محتوا جا می‌ماند، مقدار ترتیب‌دهی پروژه به 'start' تنظیم می‌شود.

'unsafe' : بدون توجه به اینکه محتوای پروژه جا می‌ماند یا خیر، مقدار ترتیب‌دهی ثابت می‌ماند.

مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: مراجعه کنید مقدار اولیه.
ترتیب‌دهی از عنصر والد خود این ویژگی را ارث می‌برد. لطفاً به: مراجعه کنید ترتیب‌دهی.

جزئیات فنی

مقدار پیش‌فرض: معمولی
ترتیب‌دهی: خیر
انیمیشن سازی: پشتیبانی نمی‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
آموزش زبان برنامه‌نویسی: object.style.placeContent="end space-around"

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

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

کروم ایج فایرفاکس سافاری اُپرا
59.0 79.0 53.0 11.0 46.0

صفحات مرتبط

درس:CSS گرید لائؤت

درس:CSS ایکسلایو بگا میٹر لائؤت

مراجعه:ویژگی align-content CSS

مراجعه:CSS جسج-مطلب پروپری

مراجعه:HTML DOM alignContent کی ویژگی