CSS प्लेस-सेल्फ प्रतियोगिता

परिभाषा और प्रयोग

place-self गुण को एकल ग्रिड आइटम को जमा करने के लिए प्रयोग किया जाता है, यह निम्नलिखित गुणों का एकल प्रदर्शन है:

• align-self
• justify-self

यदि place-self गुण दो मान है:

place-self: start center;

• align-self गुण का मान 'start' है
• justify-self गुण का मान 'center' है

यदि place-self गुण केवल एक मान है:

place-self: end;

• तो align-self और justify-self गुण के मान अंतिम हैं

प्रयोग

उदाहरण 1

एकल ग्रिड आइटम को ब्लॉक और एकल दिशा में समाप्त स्थान पर जमा करें:

#myDiv {
  place-self: end;
}

स्वयं प्रयोग करें

उदाहरण 2: लिखने की शैली

जब <div> एलीमेंट के writing-mode जब 'vertical-rl' के रूप में गुणमान निर्धारित किया जाता है, तो ग्रिड कक्ष की ब्लॉक दिशा में समाप्त स्थान नीचे से बाएं ओर जाता है, एकल दिशा में समाप्त स्थान दायं से नीचे जाता है:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

स्वयं प्रयोग करें

उदाहरण 3: अलस्टिक बैकस्ट्रीम

place-self गुण भी अलस्टिक बैकस्ट्रीम परियोजना के लिए उपयोग किया जा सकता है, लेकिन justify-self दूसरी गुण को अनदेखा कर दिया जाएगा क्योंकि यह अलस्टिक बैकस्ट्रीम में लागू नहीं होती:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

स्वयं प्रयोग करें

CSS व्याकरण

place-self: auto|value|initial|inherit;

गुण मान

तकनीकी विवरण

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

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

संबंधित पृष्ठ

तालीम:CSS ग्रिड लेआउट

तालीम:CSS एक्स्टेंशन बॉक्स लेआउट

संदर्भ:सीएसएस एलाइन-सेल्फ गुण

संदर्भ:CSS justify-self गुण

संदर्भ:CSS रिटिंग-मोड प्रभाव