कंटेनर की ऊंचाई भरने के लिए फ्लेक्स चाइल्ड को कैसे स्ट्रेच करें

फ्लेक्सबॉक्स के साथ काम करते समय, इस समस्या का सामना करना आम बात है कि चाइल्ड एलिमेंट कहां है यह अपने कंटेनर की पूरी ऊंचाई तक नहीं फैलता है। यह अक्सर ऊंचाई: 100% संपत्ति के गलत उपयोग के कारण होता है।

फ्लेक्सबॉक्स में, ऊंचाई: 100% संपत्ति समस्याग्रस्त हो सकती है क्योंकि:

• मूल तत्व को एक निश्चित की आवश्यकता होती है ऊंचाई, जो फ्लेक्सबॉक्स के सिद्धांतों के विरुद्ध है।
• जब कई बच्चे मौजूद हों, तो ऊंचाई का उपयोग करते हुए: एक बच्चे पर 100% दूसरों की उपेक्षा करेगा।

समाधान को हटाना है ऊंचाई: 100% संपत्ति और फ्लेक्सबॉक्स के डिफ़ॉल्ट व्यवहार पर भरोसा करें। डिफ़ॉल्ट रूप से, पंक्ति दिशा में फ्लेक्स आइटम (सामान्य लेआउट) संपत्ति संरेखित-आइटम: खिंचाव के साथ लंबवत संरेखित होते हैं। इसका मतलब यह है कि कंटेनर की उपलब्ध ऊंचाई को भरने के लिए चाइल्ड तत्व स्वचालित रूप से फैल जाएगा। ='डिस्प्ले: फ्लेक्स'>

इस उदाहरण में, पीला बच्चा कंटेनर की ऊंचाई को भरने के लिए खिंचेगा, भले ही नीले बच्चे के पाठ की ऊंचाई कुछ भी हो। ऐसा इसलिए है क्योंकि डिफ़ॉल्ट एलाइन-आइटम: स्ट्रेच मान यह सुनिश्चित करता है कि फ्लेक्स आइटम उपलब्ध स्थान पर कब्जा करने के लिए लंबवत रूप से फैले हुए हैं।