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