ویژگی CSS justify-items

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

ویژگی justify-items بر روی جعبه شبکه تنظیم می‌شود تا فرزندان (جعبه‌های شبکه) در جهت درون‌خط قرار گیرند.

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

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

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

لطفاً به: مراجعه کنید

آموزش CSS:CSS Grid

آموزش CSS:تصحیح CSS

دستورالعمل CSS:ویژگی align-items

دستورالعمل CSS:ویژگی direction

دستورالعمل CSS:ویژگی grid

دستورالعمل CSS:ویژگی grid-template-columns

دستورالعمل CSS:ویژگی justify-self

دستورالعمل CSS:ویژگی position

دستورالعمل CSS:ویژگی writing-mode

مثال

مثال 1

هر جعبه شبکه را در انتهای جعبه‌های خود در جهت درون‌خط قرار دهید:

#container {
  display: grid;
  justify-items: end;
}

آزمایش کنید

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

روش قرارگیری در برابر جعبه به ‘وسط’ تنظیم شده است، جعبه خود به ‘راست‌جمع’ تنظیم شده است. مقدار 'right' برنده است:

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

آزمایش کنید

مثال 3: تنظیم justify-items بر روی جعبه‌های دارای قرارگیری مطلق

تنظیم روش قرارگیری جعبه‌های دارای قرارگیری مطلق به ‘راست‌جمع’:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

آزمایش کنید

مثال 4: writing-mode

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

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

آزمایش کنید

مثال 5: direction

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

#container {
  justify-items: start;
  direction: rtl;
}

آزمایش کنید

جملات CSS

justify-items: legacy|normal|stretch|همزمانی مکانی|overflow-alignment|همزمانی خط پایه|initial|inherit;

مقدار ویژگی

مقدار توضیح
legacy

مقدار پیش‌فرض.

تنها در حالتی که با 'legacy' شروع شود، اگر مقدار justify-self عنصر شبکه به 'auto' باشد، آن عنصر مقدار ویژگی justify-items شبکه‌ای را ارث می‌برد.

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

جزئیات فنی

مقدار پیش‌فرض: legacy
ارث‌برداری: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
جملات برنامه‌نویسی JavaScript: object.style.justifyItems="center"

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

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

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