CSS justify-self ਪ੍ਰਾਪਰਟੀ

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

justify-self اٹری بیوٹ گرید یونٹ کی ویکٹریل سمت میں گرید آئٹم کو توجہ دیتا ہے.

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

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

تذکرہ:گرید آئٹم کو بلاک سمت کی جانی چاہئی تو استعمال کریئن: الائن-سمف اٹری بیوٹ یا الائن-آئٹمس اٹری بیوٹ اٹری بیوٹ

مزید دیکھیئے:

سی ایس ایس تعلیم:گرید

سی ایس ایس تعلیم:سی ایس ایس پوزیشن

سی ایس ایس مراجع دوسریا:الائن-کنٹینٹ اٹری بیوٹ

سی ایس ایس مراجع دوسریا:الائن-آئٹمس اٹری بیوٹ

سی ایس ایس مراجع دوسریا:الائن-سمف اٹری بیوٹ

سی ایس ایس مراجع دوسریا:ڈائریکشن اٹری بیوٹ

سی ایس ایس مراجع دوسریا:گرید اٹری بیوٹ

سی ایس ایس مراجع دوسریا:گرید-ٹیمپلیٹ-کولمز اٹری بیوٹ

سی ایس ایس مراجع دوسریا:پوزیشن اٹری بیوٹ

سی ایس ایس مراجع دوسریا:وریٹنگ-موڈ اٹری بیوٹ

مزید دیکھیئے:

مثال

مثال 1

گرید آئٹم کو اپنے گرید یونٹ کی راست سمت میں توجہ دی جانی چاہئی:

.red {
  display: grid;
  justify-self: راست;
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

مثال 2: justify-self کا مقابلہ justify-items

کونٹینر کی توجہ کی جانی چاہئی کے لئے 'سنتر' کی جانی چاہئی، گرید آئٹم خود کو 'راست' کی جانی چاہئی. اپریبیوٹ 'راست' چوکیدار ہوگا:

#container {
  display: grid;
  justify-items: سنتر;
}
.blue {
  justify-self: راست;
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

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

ابسولوٹی پوزیشن والا گرید آئٹم کی توجہ راست کی جانی چاہئی:

#container {
  display: grid;
  پوزیشن: ریلیوٹیو;
}
.red {
  پوزیشن: ابسولوٹی;
  justify-self: راست;
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

مثال 4: وریٹنگ-موڈ

جب کے وریٹنگ-موڈ اٹری بیوٹ کا ورتھ ویکٹریل-رل رکھا گیا ہوا تو رینک کی سمت پائیدار کی جاتی ہے. نتیجہ یہ کہ کانٹینر کا آغاز چپ سے اوپر کی جان چکا ہوا ہے، کانٹینر کا آخری حصہ چپ سے نیچے کی جان چکا ہوا ہے:

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

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 5: direction

ਜਦੋਂ ਗ੍ਰਿੱਡ ਕੰਟੇਨਰ ਏਲੀਮੈਂਟ ਦਾ 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 ਸੈਟ ਹੋਇਆ ਹੈ ਤਾਂ ਗੁਣ ਦਾ ਵਿਵਹਾਰ '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