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 {
  display: grid;
  justify-self: right;
}

अपने आप प्रयास करें

उदाहरण 2: justify-self और justify-items का तुलना

कंटेनर के अनुकूल आयाम को 'मध्यस्थ' सेट करें, ग्रिड प्रोजेक्ट को आगे से 'दायाँ ओर जमीनी' सेट करें। 'right' एट्रिब्यूट अधिकारी है:

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

अपने आप प्रयास करें

उदाहरण 3: अभिकर्ता लोकेशन वाले ग्रिड प्रोजेक्ट पर justify-self सेट करना

अभिकर्ता लोकेशन के लिए अभिकर्ता लोकेशन के आयाम को 'right' सेट करें:

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

अपने आप प्रयास करें

उदाहरण 4: writing-mode

जब ग्रिड कंटेनर एलीमेंट का writing-mode एट्रिब्यूट का मान vertical-rl रखा जाता है तो लाइन अंतरिक्ष दिशा नीचे होती है। परिणामस्वरूप कंटेनर का शुरू बाईं ओर से ऊपर की ओर जाता है, कंटेनर का अंत दायाँ ओर से नीचे की ओर जाता है:

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

अपने आप प्रयास करें

उदाहरण 5: direction

जब ग्रिड कंटेनर एलिमेंट का direction गुण 'rtl' में सेट किया गया है तो इनलाइन दिशा दायाँ से बाईं ओर की ओर होती है। परिणामस्वरूप कंटेनर का शुरू बाएँ ओर से दायाँ ओर की ओर जाता है और कंटेनर का अंत दायाँ ओर से बाईं ओर की ओर जाता है:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

अपने आप प्रयास करें

सीएसएस व्याकरण

justify-self: auto|normal|stretch|स्थानांतरण एकीकृत|overflow-alignment|बेस लाइन एकीकृत|initial|inherit;

गुण मूल्य

मूल्य वर्णन
auto डिफ़ॉल्ट
normal

विन्यास परिवेश के अनुसार है, लेकिन size नहीं सेट करने पर ग्रिड विन्यास में ग्रिड आइटम के 'stretch' के समान होगा

अगर size सेट किया गया है तो गुण के व्यवहार 'start' के समान होगा
stretch अगर inline-size (चौड़ाई) नहीं सेट किया गया है तो फैलाकर ग्रिड कोष्ठ को भरने के लिए फैलाया जाएगा
start पट्टी दिशा में शुरू में प्रोजेक्ट को एकीकृत करें
left प्रोजेक्ट को बाएँ ओर एकीकृत करें
center प्रोजेक्ट को मध्य में एकीकृत करें
end पट्टी दिशा में अंत में प्रोजेक्ट को एकीकृत करें
right प्रोजेक्ट को दायाँ ओर एकीकृत करें
overflow-alignment
  • 'safe' प्रोजेक्ट का एकीकृत तरीका 'start' में सेट करेगा, अगर सामग्री ओवरफ्लो करे。
  • 'unsafe' एकीकृत वैल्यू बनाए रहे, चाहे प्रोजेक्ट की सामग्री ओवरफ्लो करे या ना करे。
बेस लाइन एकीकृत एलिमेंट और माता एलिमेंट के बेस लाइन से एकीकृत होता है。
initial इस गुण को इसके डिफ़ॉल्ट वैल्यू पर सेट करें। देखें initial。
inherit इस गुण को उसके माता एलिमेंट से विरासत करें। देखें inherit。

तकनीकी विवरण

डिफ़ॉल्ट वैल्यू: auto
विरासत: नहीं
एनिमेशन निर्माण: समर्थित नहीं है। देखें:एनिमेशन संबंधी गुण。
संस्करण: सीएसएस3
जेसक्रिप्ट व्याकरण: object.style.justifySelf="right"

ब्राउज़र समर्थन

इस तालिका में दिए गए नंबरों में इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण उल्लेख किया गया है。

क्रोम एज फ़ायरफॉक्स सफारी ओपेरा
क्रोम आईई / एज फ़ायरफॉक्स सफारी ओपेरा
57.0 16.0 45.0 10.1 44.0