CSS جسٹی-آئٹمز انٹری

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

justify-items کا مقادیر گرید کانٹینر پر قائم کیا جاتا ہے، تاکہ ذیلی عنصر (گرید آئٹم) درون خط کی سمت میں تناسب تنظیم کی جاسکے.

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

اگر اس کا کسی تناسب تنظیم کا اثر ہونا چاہئے تو، گرید آئٹم کو درون خط کی سمت میں اپنے اطراف میں استعمال شدہ خالی مقادیر رکھنا چاہئے:

نکات:گرید آئٹم کو بلک دوسرتی سمت میں تناسب تنظیم کیا جانا چاہئے تو، align-items کا مقادیر کمپنیاً.

ایک بار دیکھیئے:

CSS درس:CSS گرید

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: absolute کی تعین شدہ گرید آئٹم پر justify-items کا استعمال

مقادیر absolute کی تعین شدہ گرید آئٹم کی درون خط کی تناسب تنظیم کا “دائیں سمت” سے بنا دیا جاتا ہے:

#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' شروع شود، عنصر شبکه با مقدار 'auto' justify-self ارث‌بردار ویژگی justify-items شبکه‌ی پیکربندی است.

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

جزئیات فنی

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

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

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

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