CSS place-self کا پارامetr

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

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 کا کیمپٹنٹ