HTML DOM alignSelf प्रॉपर्टी का उपयोग एक लचीले कंटेनर के अंदर मौजूद किसी दिए गए आइटम के संरेखण को निर्दिष्ट करने के लिए किया जाता है। alignSelf प्रॉपर्टी का उपयोग किसी तत्व के ग्रिड या फ्लेक्स डिस्प्ले लेआउट में निर्दिष्ट align-items मान को ओवरराइड करने के लिए किया जाता है।
सिंटैक्स
alignSelf प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"
मान
alignSelf प्रॉपर्टी के निम्नलिखित मान हैं:
| मान | विवरण |
|---|---|
| Stretch | यह डिफ़ॉल्ट मान है और कंटेनर में फिट होने के लिए आइटम को फैलाने के लिए उपयोग किया जाता है। |
| Center | कंटेनर के केंद्र में आइटम को स्थित करने के लिए उपयोग किया जाता है। |
| flex-start | कंटेनर की शुरुआत में आइटम को स्थित करने के लिए। |
| flex-end | कंटेनर के अंत में आइटम को स्थित करने के लिए। |
| baseline | कंटेनर बेसलाइन पर आइटम को स्थित करने के लिए। |
| initial | इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| Inherit | पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
Style alignSelf प्रॉपर्टी का उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #container { width: 180px; height: 220px; padding: 10px; border: 1px solid #333; display: flex; align-items:baseline; flex-flow: row wrap; } .ele { width: 60px; height: 60px; background-color: skyblue; } .ele:nth-child(2n) { background-color: orange; } </style> <script> function changeAlign(){ document.getElementsByClassName("ele")[1].style.alignSelf="flex-end"; } </script> </head> <body> <h2>Demo Heading</h2> <div id="container"> <div class="ele"></div> <div class="ele"></div> <div class="ele"></div> </div> <p>Change the align Self property of the above div by clicking the below button</p> <button onclick="changeAlign()">CHANGE</button> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
CHANGE बटन पर क्लिक करने पर:
