CSS جسٹی-سلف اناتریا

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

justify-self نمائش گرڈ یونٹ کی درون سمت میں گرڈ آئٹم کو درون سمت کی جانب سمت میں تنازع سمت میں رکھتی ہے。

انگریزی صفحوں کیلئے، درون سمت کی جانب سمت کا سمت چپ سے دکھائی سمت کی جانب سمت سے ہوتی ہے، بلاک سمت کا سمت بجائے واپس کی جانب سمت سے ہوتی ہے。

اگر اس نمائش کو کسی تنازع کا اثر بنانا چاہئیں تو، گرڈ آئٹم کو درون درون سمت میں اپنے اطراف میں مفید فضاء چاہئیں تو،

نکات:گرڈ آئٹم کو بلاک سمت کی جانب سمت میں تنازع سمت میں رکھنا چاہئیں تو، align-self نمائش یا align-items نمائش نمائش.

کریپکا:

CSS تعلیمات:CSS گرڈ

CSS تعلیمات:CSS لوگوپ

CSS مراجع دفتر:align-content نمائش

CSS مراجع دفتر:align-items نمائش

CSS مراجع دفتر:align-self نمائش

CSS مراجع دفتر:direction نمائش

CSS مراجع دفتر:grid نمائش

CSS مراجع دفتر:grid-template-columns نمائش

CSS مراجع دفتر:position نمائش

CSS مراجع دفتر:writing-mode نمائش

کریپکا:

مثال

مثال 1

گرڈ یونٹ کی دکھائی کی جانب سمت میں گرڈ آئٹم کی تنازع سمت میں:

.red {
  display: grid;
  justify-self: right;
}

آزمایش کنید

مثال 2: justify-self کی تنازع justify-items سے

کوائنٹر سمت کی تنازع سمت کو 'مرکز' میں رکھی جاتی ہے، گرڈ آئٹم خود کو 'دکھائی کی جانب' سمت سے تنازع سمت میں رکھا جاتا ہے۔ نمائش 'right' میں پائیدار ہوتی ہے:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

آزمایش کنید

مثال 3: ابسولوٹ لیجائز گرڈ پروجیکٹ پر justify-self سیٹ کرنا

ابسولوٹ لیجائز کئی گرڈ آئٹم کی تنازع سمت کو 'right' میں رکھا جاتا ہے:

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

آزمایش کنید

مثال 4: writing-mode

جبتی کانٹینر عناصر کی writing-mode نمائش vertical-rl کی وجہ سے سمت درون کی جانب سے بجائے واپس کی جانب سے رکھی جاتی ہے۔ نتیجے میں کانٹینر کا شروع چپ سے بجائے اوپر رکھا جاتا ہے، کانٹینر کا خاتمہ بجائے دکھائی سے نیچے رکھا جاتا ہے:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

آزمایش کنید

مثال 5: direction

وقتی مقدار attribute direction عنصر شبکه‌بندی به 'rtl' تنظیم می‌شود، جهت خطی درون‌چینی از راست به چپ است. نتیجه این است که نقطه شروع کانتینر از سمت چپ به سمت راست حرکت می‌کند و نقطه پایان کانتینر از سمت راست به سمت چپ حرکت می‌کند:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

آزمایش کنید

گرامر CSS

justify-self: auto|normal|stretch|تراز جغرافیایی|overflow-alignment|تراز هم‌ترازی خط پایه|initial|inherit;

مقدار ویژگی

مقدار توضیح
auto مقدار پیش‌فرض. مقدار justify-self عنصر شبکه‌بندی را ارث می‌برد.
normal

بستگی به محیط طراحی دارد، اما مشابه 'stretch' عنصر شبکه در شبکه‌بندی است که size تنظیم نشده باشد.

اگر size تنظیم شده باشد، رفتار مقدار این ویژگی مشابه 'start' است.
stretch اگر inline-size (عرض) تنظیم نشده باشد، کشیده می‌شود تا سلول شبکه را پر کند.
start پروژه را در آغاز جهت خطی هم‌تراز می‌کند.
left پروژه را چپ‌چین می‌کند.
center پروژه را به مرکز هم‌تراز می‌کند.
end پروژه را در انتهای جهت خطی هم‌تراز می‌کند.
right پروژه را راست‌چین می‌کند.
overflow-alignment
  • 'safe' مقدار هم‌ترازی پروژه را به 'start' تنظیم می‌کند، اگر محتوا از حد مجاز عبور کند.
  • 'unsafe' مقدار هم‌ترازی را حفظ می‌کند، بدون توجه به اینکه محتوای پروژه از حد مجاز عبور می‌کند یا خیر.
تراز هم‌ترازی خط پایه عنصر با خط پایه عنصر پدر خود هم‌تراز است.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: مراجعه کنید initial.
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. لطفاً به: مراجعه کنید inherit.

جزئیات فنی

مقدار پیش‌فرض: auto
وراثت: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
جاواسکریپت گرامر: object.style.justifySelf="right"

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

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

کروم ایج فایرفاکس سافاری آپرا
کروم IE / ایج فایرفاکس سافاری آپرا
57.0 16.0 45.0 10.1 44.0