ویژگی CSS justify-self

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

ویژگی justify-self جعبه شبکه را در داخل جعبه شبکه‌ای خود در جهت درون‌ترتیب هم‌ترازی می‌کند.

برای صفحات انگلیسی، جهت درون‌ترتیب از چپ به راست است و جهت بلوک به پایین است.

برای اینکه این ویژگی دارای هرگونه اثر هم‌ترازی باشد، جعبه شبکه باید در جهت درون‌ترتیب در اطراف خود فضای قابل استفاده داشته باشد.

توضیح:برای هم‌ترازی جعبه‌های شبکه در جهت بلوک به جای جهت درون‌ترتیب، از: ویژگی align-self یا ویژگی align-items ویژگی‌ها.

لطفاً به: بپردازید

آموزش CSS:CSS Grid

آموزش 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 {
  writing-mode: vertical-rl;
  justify-self: right;
display: grid;

direction: rtl;

مثال 2: مقایسه justify-self با justify-items

روش هم‌ترازی در برابر جعبه به 'center' تنظیم شده است، جعبه شبکه خود به 'right' تنظیم شده است. ارزش 'right' برنده است:

#container {
  writing-mode: vertical-rl;
  justify-items: center;
display: grid;
وقتی مقدار ویژگی direction عنصر جعبه شبکه به 'rtl' تنظیم شود، جهت خطوط درون‌خطی از راست به چپ است. نتیجه این است که نقطه شروع جعبه به سمت چپ حرکت می‌کند و نقطه پایان جعبه به سمت راست حرکت می‌کند:
  justify-self: right;
display: grid;

direction: rtl;

مثال 3: تنظیم justify-self بر روی جعبه‌های شبکه مطلق

تنظیم روش هم‌ترازی عنصر جعبه شبکه که در موقعیت مطلق قرار دارد به 'right':

#container {
  writing-mode: vertical-rl;
  position: relative;
display: grid;
.red {
  position: absolute;
  justify-self: right;
display: grid;

direction: rtl;

مثال 4: writing-mode

وقتی که مقیاس نوشتن عنصر جعبه شبکه به vertical-rl تنظیم شود، جهت درون‌ترتیب به پایین است. نتیجه این است که نقطه شروع جعبه از سمت چپ به بالا حرکت می‌کند و نقطه انتهایی جعبه از سمت راست به پایین حرکت می‌کند:

#container {
  writing-mode: vertical-rl;
  writing-mode: vertical-rl;
display: grid;
وقتی مقدار ویژگی direction عنصر جعبه شبکه به 'rtl' تنظیم شود، جهت خطوط درون‌خطی از راست به چپ است. نتیجه این است که نقطه شروع جعبه به سمت چپ حرکت می‌کند و نقطه پایان جعبه به سمت راست حرکت می‌کند:
  #container {
display: grid;

direction: rtl;

例子 5：direction

网格容器元素的 direction 属性值设置为“rtl”时，行内方向是从右到左。结果是容器的起点从左侧移到右侧，容器的末端从右侧移到左侧：

#container {
  writing-mode: vertical-rl;
  مثال 5: direction
display: grid;
وقتی مقدار ویژگی direction عنصر جعبه شبکه به 'rtl' تنظیم شود، جهت خطوط درون‌خطی از راست به چپ است. نتیجه این است که نقطه شروع جعبه به سمت چپ حرکت می‌کند و نقطه پایان جعبه به سمت راست حرکت می‌کند:
  #container {
display: grid;

direction: rtl;

.blue {

justify-self: end;}آزمایش کنیدپایان خطآزمایش کنید'safe' مقدار تراز را به 'start' تغییر می‌دهد، اگر محتوا جا به جا شود.نوشتار CSS

justify-self: auto|normal|stretch|

تراز قرار‌گیری |
جزئیات فنی |initial|inherit;
مقدار ویژگی

مقدار

توضیح
پیش‌فرض. مقدار ویژگی justify-self را از جعبه شبکه میراث می‌گیرد. معمولی
وابسته به محیط قرار‌گیری، اما مشابه 'stretch' شبکه‌ای است که عنصر شبکه در قرار‌گیری شبکه تنظیم نشده باشد. اگر size تنظیم شده باشد، رفتار مقدار ویژگی مانند 'start' است.
کشش اگر inline-size (عرض) تنظیم نشده باشد، کشیده می‌شود تا سلول شبکه را پر کند.
شروع پروژه را در ابتدای خط جابجا می‌کند.
چپ پروژه را به سمت چپ جابجا می‌کند.
مرکز پروژه را به مرکز جابجا می‌کند.
پایان خط
  • پروژه را به سمت راست جابجا می‌کند.
  • تراز جا به جا
'safe' مقدار تراز را به 'start' تغییر می‌دهد، اگر محتوا جا به جا شود. 'unsafe' مقدار تراز را حفظ می‌کند، بدون توجه به اینکه محتوای پروژه جا به جا می‌شود یا خیر.
تراز بaseline تراز بaseline تراز بaseline.
مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. مراجعه کنید مقدار اولیه.

از عنصر والد خود این ویژگی را میراث می‌گیرد. مراجعه کنید

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

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

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

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0