फ्लेक्स कंटेनर घोंसले करते समय फ्लेक्स गुणों का उचित उपयोग

Question

मुझे फ्लेक्सबॉक्स का सही उपयोग करने में समस्याएं आ रही हैं और कुछ स्पष्टीकरण प्राप्त करना चाहता था कि अभिभावक और बाल तत्व कैसे घोंसले करते हैं।

मुझे पता है कि बच्चे को माता-पिता के फ्लेक्स को विरासत में मिला है। लेकिन अगर आपको अपने बच्चों (बच्चे) के लिए बच्चे को फ्लेक्स करने की ज़रूरत है तो क्या यह ओवरराइट हो जाता है? फ्लेक्सबॉक्स का उचित उपयोग क्या है?

जब कि बच्चे के माता पिता फ्लेक्स के ऊपर लिख देगा मैं के लिए अपने बच्चे की (बच्चे की) खातिर बच्चे को display: flex लागू करने के लिए है, या?

.parent-container { 
    display: flex; 
    flex: 1 0 100%; 
} 
.child-container { 
    flex: 1 1 50% 
} 
.baby-of-child-container { 
    flex: 1 1 50%; 
} 

<div class='parent-container'> 
    <div class='child-container'> 
    <div class='baby-of-child-container'></div> 
    <div class='baby-of-child-container'></div> 
    </div> 
    <div class='child-container'> 
    <div class='baby-of-child-container'></div> 
    <div class='baby-of-child-container'></div> 
    </div> 
</div> 

Answer 1

एक flex formatting context के दायरे एक माता पिता/बच्चे का रिश्ता तक सीमित है।

इसका मतलब है कि एक फ्लेक्स कंटेनर हमेशा माता-पिता होता है और एक फ्लेक्स आइटम हमेशा बच्चा होता है। फ्लेक्स गुण केवल इस संबंध में ही काम करते हैं।

बच्चों के बाहर एक फ्लेक्स कंटेनर के वंशज फ्लेक्स लेआउट का हिस्सा नहीं हैं और फ्लेक्स गुणों को स्वीकार नहीं करेंगे।

बच्चे को फ्लेक्स गुणों को लागू करने के लिए आपको हमेशा माता-पिता को display: flex या display: inline-flex लागू करने की आवश्यकता होगी।

कुछ फ्लेक्स गुण है कि केवल फ्लेक्स कंटेनर (जैसे, justify-content, flex-wrap और flex-direction), और वहाँ कुछ फ्लेक्स गुण है कि केवल फ्लेक्स आइटम (उदा align-self, flex-grow और flex) के लिए लागू कर रहे हैं के लिए लागू कर रहे हैं।

हालांकि, फ्लेक्स आइटम फ्लेक्स कंटेनर भी हो सकते हैं। ऐसे मामलों में तत्व सभी फ्लेक्स गुणों को स्वीकार कर सकता है। ऐसा होने के नाते कि प्रत्येक संपत्ति एक अलग कार्य करता है, कोई आंतरिक संघर्ष नहीं होता है और कुछ भी ओवरराइड करने की आवश्यकता नहीं होती है।