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|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
legacy

ਮੂਲ ਮੁੱਲ

ਜਦੋਂ ਮੂਲ ਮੁੱਲ 'legacy' ਨਾਲ ਸ਼ੁਰੂ ਹੋਵੇ ਤਾਂ ਜਸਟੀਫਾਈ-ਸੈਲਵਾਲ ਦਾ ਮੁੱਲ 'auto' ਵਾਲਾ ਗ੍ਰਿੱਡ ਤੱਤ ਗ੍ਰਿੱਡ ਕੰਟੇਨਰ ਦੇ ਜਸਟੀਫਾਈ-ਆਈਟਮਜ਼ ਗੁਣ ਦਾ ਮੁੱਲ ਲੈਂਦਾ ਹੈ

ਇਸ ਦਾ ਮੰਤਰ ਹੈ ਕਿ ਐੱਚਟੀਐੱਮਐੱਲ ਦੇ <center> ਤੱਤ ਅਤੇ align ਗੁਣ ਦੀ ਵਿਰਾਸਤੀ ਮਿਲਾਓ
normal ਲੇਬਲ ਦਿਸ਼ਾ ਨੂੰ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਪਰ ਗ੍ਰਿੱਡ ਲੇਬਲ ਦੇ 'stretch' ਨਾਲ ਸਮਾਨ
stretch ਜੇਕਰ inline-size (ਚੌਡਾਈ) ਨਹੀਂ ਸੈਟ ਹੋਇਆ ਤਾਂ ਗ੍ਰਿੱਡ ਸੈਲ ਨੂੰ ਭਰਨ ਲਈ ਸਾਰੇ ਤੋਂ ਫੈਲਾਓ
start ਰੇਖੀ ਦਿਸ਼ਾ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਮਿਲਾਓ
left ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਵੱਲੋਂ ਮਿਲਾਓ
center ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਮੱਧ ਵਿੱਚ ਮਿਲਾਓ
end ਰੇਖੀ ਦਿਸ਼ਾ ਦੇ ਅੰਤ ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਮਿਲਾਓ
right ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਦਾਹਿਨੇ ਮੁੱਲ ਨਾਲ ਮਿਲਾਓ
overflow-alignment
  • 'safe' ਪ੍ਰੋਜੈਕਟ ਦੇ ਮੱਧਮ ਮੁੱਲ ਨੂੰ 'start' ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੇ, ਜੇਕਰ ਸਮਾਪਤ ਹੋਵੇ
  • 'unsafe' ਮੱਧਮ ਮੁੱਲ ਰੱਖੋ, ਚਾਹੇ ਪ੍ਰੋਜੈਕਟ ਦਾ ਸਮਾਪਤ ਹੋਵੇ ਜਾਂ ਨਹੀਂ
baseline-alignment ਤੱਤ ਅਤੇ ਮਾਤਾ ਤੱਤ ਦੇ ਬੇਸਲਾਈਨ ਨਾਲ ਮਿਲਾਓ
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial.
inherit ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਲੈਣ ਲਈ ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: legacy
ਵਿਰਾਸਤੀ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ: ਸਮਰਥਨ ਨਹੀਂ ਹੈ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ.
ਸੰਸਕਰਣ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸਿਜ਼ਿਨ: object.style.justifyItems="center"

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਅੰਕ ਨੂੰ ਪਹਿਲੀ ਵਾਰ ਇਸ ਗੁਣ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਦੱਸਿਆ ਹੈ。

ਚਰਾਮੇ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਚਰਾਮੇ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
57.0 16.0 45.0 10.1 44.0