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