मान लीजिए आपके पास अंदर एक बटन के साथ एक फ्लेक्सबॉक्स कंटेनर है:
<div class="container"> <button class="button">Button</button> </div>यदि आप justify-content प्रॉपर्टी का उपयोग करके बटन (चाइल्ड एलिमेंट) को क्षैतिज रूप से सेंटर अलाइन करने का प्रयास करते हैं जैसे:
.container { height: 300px; display: flex; justify-content: center; }तब बटन की (चाइल्ड एलिमेंट) ऊंचाई पैरेंट एलिमेंट की ऊंचाई तक खिंच जाएगी (इस मामले में 300px):
जो शायद आप नहीं चाहते!
फ्लेक्स आइटम्स (फ्लेक्स कंटेनर के बच्चों) को वर्टिकली स्ट्रेच होने से रोकने के कुछ तरीके हैं।
यदि आप align-items प्रॉपर्टी के साथ फ्लेक्स आइटम्स को वर्टिकली सेंटर अलाइन करते हैं, तो स्ट्रेच स्वचालित रूप से दूर हो जाता है:
.container { height: 300px; display: flex; justify-content: center; /*वर्टिकल सेंटर अलाइनमेंट:*/ align-items: center; }
लेकिन क्या होगा यदि आप अपने फ्लेक्स कंटेनर के फ्लेक्स आइटम्स को वर्टिकली अलाइन नहीं करना चाहते?
तब आप फ्लेक्स आइटम पर CSS height प्रॉपर्टी के max-content मान का उपयोग कर सकते हैं:
.button { height: max-content; }
अब आपके फ्लेक्स आइटम की ऊंचाई उसके कंटेंट की ऊंचाई द्वारा निर्धारित की जाएगी, जो इस बटन उदाहरण में टेक्स्ट है, जो 14px है (+ बटन का डिफ़ॉल्ट पैडिंग):
आप फ्लेक्स आइटम पर align-self प्रॉपर्टी का भी उपयोग कर सकते हैं:
.button { align-self: flex-start; }यह सरल उपयोग के मामलों में max-content का उपयोग करने के समान परिणाम देगा, लेकिन यह आपके विशिष्ट संदर्भ पर निर्भर करता है (दोनों आज़माएं)।
