CSS place-self کا پارامetr
- پچھلے ویب place-items
- پائیدار ویب pointer-events
تعریف اور استعمال
place-self
خاصیت کو ایک واحد گرید پروجیکٹ کو آگاہ رکھنے کے لئے استعمال کیا جاتا ہے، یہ درج ذیل خاصیتوں کا مختصر نام ہے:
اگر place-self کی خاصیت کو دو مقصد رکھا گیا ہوا تو:
place-self: start center;
- align-self کی خاصیت کا مقصد 'start' رکھا ہوا ہوگا
- justify-self کی خاصیت کا مقصد 'center' رکھا ہوا ہوگا
اگر place-self کی خاصیت کو ایک مقصد رکھا گیا ہوا تو:
place-self: end;
- تو align-self اور justify-self کی خاصیت کا مقصد 'end' رکھا ہوا ہوگا
مثال
مثال 1
ایک واحد گرید پروجیکٹ کو بلاک اور ردیف کی دونوں سمتوں میں خاتمے سمت پر آگاہ رکھا جائے گا:
#myDiv { place-self: end; }
مثال 2: لکچر کا انداز
جب <div> علامت کا writing-mode کیفیت کا مقصد 'vertical-rl' رکھا گیا ہوا تو گرید کی سلو کا بلاک سمت کا خاتمہ سمت پائیدان چلدہ اور ردیف کی سمت کا خاتمہ سمت چپ سمت میں موٹا ہوجائے گا:
#contianer { display: grid; writing-mode: vertical-rl; } #myDiv { place-self: end; }
مثال 3: طراحی شبکهای انعطافپذیر
place-self
این ویژگی نیز میتواند برای پروژههای طراحی شبکهای انعطافپذیر استفاده شود، اما justify-self
ثانیهای که در آن بیاهمیت است، زیرا در طراحی شبکهای انعطافپذیر کاربرد ندارد:
#contianer { display: flex; } #myDiv { place-self: end stretch; }
آموزش زبان CSS
place-self: auto|value|initial|inherit;
مقدار ویژگی
مقدار | توضیح |
---|---|
auto | پیشفرض. مقدار پیشفرض place-self عناصر. |
normal |
به وابستگی از محیط طراحی، اما برای پروژههایی که اندازه تعیین نشده است، رفتار مانند 'stretch' در طراحی شبکه است. اگر اندازه تعیین شده باشد، رفتار مقدار مانند 'start' است. |
stretch | اگر اندازه تعیین نشده باشد، با ترازبندی پرابند، تا پر کردن سلول شبکه کشیده میشود. |
start | در جهت خطی و بلوک، پروژه را به شروع ترازبندی میکند. |
left | در جهت خطی، پروژه را به سمت چپ ترازبندی میکند، به عنوان مقدار justify-self. |
center | پروژه را به مرکز ترازبندی میکند. |
end | در جهت خطی و بلوک، پروژه را به انتهای ترازبندی میکند. |
right | در جهت خطی، پروژه را به سمت راست ترازبندی میکند، به عنوان مقدار justify-self. |
ترازبندی پرابند |
'safe':اگر محتوا از حد مجاز جلوتر میرود، پروژه را به 'start' ترازبندی میکند 'unsafe':مقدار ترازبندی را در هر حالت حفظ میکند، بدون توجه به اینکه محتوای پروژه از حد مجاز جلوتر میرود یا خیر |
ترازبندی خط پایه | عنصر با خط پایه عنصر والد خود همتراز است. |
initial | این ویژگی را به مقدار پیشفرض خود تنظیم کنید. لطفاً به: مراجعه کنید initial. |
inherit | این ویژگی را از عنصر والد خود ارث میبرد. لطفاً به: مراجعه کنید inherit. |
جزئیات فنی
مقدار پیشفرض: | auto |
---|---|
ارث: | خیر |
انیمیشن: | پشتیبانی نمیشود. لطفاً به: مراجعه کنیدویژگیهای مرتبط با انیمیشن. |
نسخه: | CSS3 |
آموزش زبان جاوااسکریپت: | object.style.placeSelf="end stretch" |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخه اولین مرورگر هستند که این ویژگی را کاملاً پشتیبانی میکند.
کروم | ایج | فایرفاکس | سافاری | اُپرا |
---|---|---|---|---|
59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
مقالات مرتبط
تعلیم:CSS گرید بجسٹمنٹ
تعلیم:CSS فلیکس بجسٹمنٹ
مطالعات:ویژگی align-self سی ای ای اس
مطالعات:CSS علامت-منظور-خود
مطالعات:CSS writing-mode کا کیمپٹنٹ
- پچھلے ویب place-items
- پائیدار ویب pointer-events