ویژگی place-self CSS

تعریف و استفاده

place-self این ویژگی برای هم‌ترازی یک عنصر شبکه‌ای استفاده می‌شود و کوتاه‌نویسی از برخی از ویژگی‌های زیر است:

• align-self
• justify-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' برای ویژگی 'property' تنظیم شود، موقعیت پایان سلول شبکه در جهت بلوک از پایین به چپ حرکت می‌کند، و موقعیت پایان در جهت خطی از راست به پایین حرکت می‌کند:

#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;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

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

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

ارجاع:ویژگی align-self CSS

ارجاع:ویژگی CSS justify-self

ارجاع:ویژگی writing-mode CSS