CSS place-content کا پراپرٹی
- بال پیج perspective-origin
- پایین پیج place-items
تعریف و استعمال
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 جسج-مطلب پروپری
- بال پیج perspective-origin
- پایین پیج place-items