2017-05-10 25 views
7

आमतौर पर, सीएसएस में, जब माता-पिता और उसके अंतिम बच्चे का मार्जिन होता है, मार्जिन एक मार्जिन बनाने के लिए पतन हो जाता है। जैसेफ्लेक्सबॉक्स में मार्जिन ढहने

article { 
 
    margin-bottom: 20px 
 
} 
 

 
main { 
 
    background: pink; 
 
    margin-bottom: 20px; 
 
} 
 

 
footer { 
 
    background: skyblue; 
 
}
<div id="container"> 
 
    <main> 
 
    <article> 
 
     Item 1 
 
    </article> 
 
    <article> 
 
     Item 2 
 
    </article> 
 
    </main> 
 
    <footer>Footer</footer> 
 
</div>

आप देख सकते हैं, भले ही 20px के अंतर दोनों article और main टैग पर निर्दिष्ट किया जाता है, आप केवल पिछले लेख और पाद लेख के बीच एक 20px मार्जिन मिलता है।

फ्लेक्सबॉक्स का उपयोग करते समय, हमें अंतिम आलेख और पाद लेख के बीच 40px मार्जिन मिलता है - लेख से मुख्य तक एक पूर्ण 20px मार्जिन, और मुख्य रूप से 20px से मुख्य तक।

#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
article { 
 
    margin-bottom: 20px 
 
} 
 

 
main { 
 
    background: pink; 
 
    margin-bottom: 20px; 
 
} 
 

 
footer { 
 
    background: skyblue; 
 
}
<div id="container"> 
 
    <main> 
 
    <article> 
 
     Item 1 
 
    </article> 
 
    <article> 
 
     Item 2 
 
    </article> 
 
    </main> 
 
    <footer>Footer</footer> 
 
</div>

वहाँ flexbox मार्जिन गैर flexbox के समान तरह से व्यवहार करने के लिए एक तरीका है?

उत्तर

10

मार्जिन ढहने block formatting context की एक विशेषता है।

flex formatting context में कोई मार्जिन ढहने नहीं है।

3. Flex Containers: the flex and inline-flexdisplay values

एक फ्लेक्स कंटेनर अपने सामग्री के लिए एक नया फ्लेक्स स्वरूपण संदर्भ स्थापित करता है। यह एक ब्लॉक स्वरूपण संदर्भ, स्थापित करने जैसा है, सिवाय इसके कि ब्लॉक लेआउट के बजाय फ्लेक्स लेआउट का उपयोग किया जाता है। उदाहरण के लिए, फ्लोट फ्लेक्स कंटेनर में घुसपैठ नहीं करते हैं, और फ्लेक्स कंटेनर मार्जिन इसकी सामग्री के मार्जिन के साथ पतन नहीं होता है।

+3

nnnnnooooooooooooooo मुझे यह मत कहो! मैं मॉड्यूल के बीच अपने अतिरिक्त स्थान से कैसे छुटकारा पा सकता हूं? –

+0

@TomRoggero शायद ब्लॉक स्वरूपण संदर्भ में काम करने के लिए उस सामग्री के लिए एक रैपर जोड़ें? तब रैपर एक फ्लेक्स स्वरूपण संदर्भ में मौजूद है, लेकिन इसकी सामग्री नहीं - मुझे लगता है। हालांकि, रैपिंग अच्छा, अच्छा, अर्थपूर्ण मार्कअप तोड़ने के लिए जाता है। –

संबंधित मुद्दे