चौड़ाई और फ्लेक्स-बेस

Question

के बीच अंतर मुझे width और flex-basis के बीच व्यवहार में अंतर आया है, जिसे मैं What are the differences between flex-basis and width? द्वारा समझा नहीं सकता हूं।

.outer { 
 
    display: flex; 
 
    background: yellow; 
 
    padding: 10px; 
 
} 
 
.middle { 
 
    display: flex; 
 
    flex-shrink: 0; 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.inner { 
 
    flex-basis: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
} 
 
.inner2 { 
 
    width: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
}

<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner2"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div>

Here उदाहरण समस्या मैं आ रही हैं दर्शाता हुआ है। मैं दोनों पंक्तियों को समान दिखने की उम्मीद कर रहा हूं, हालांकि, flex-basis (पंक्ति 1) का उपयोग करते समय, फ्लेक्स कंटेनर (.middle तत्व) अपने बच्चे की आंतरिक चौड़ाई (.inner तत्व) को अनदेखा करता है और केवल टेक्स्ट को ध्यान में रखता है।

यह अंतर क्रोम, एफएफ और सफारी के नवीनतम संस्करणों में देखा जा सकता है (लेकिन आईई 11/एज में नहीं)।

स्पष्टीकरण: मैं नहीं पूछ रहा हूं कि आईई 11/एज किस तरह से व्यवहार करता है। इसका व्यवहार (इस मामले में) वास्तव में मेरे लिए तार्किक लगता है। मैं पूछ रहा हूं कि अन्य सभी ब्राउज़रों में अंतर क्यों है।

अद्यतन: एज 13 आईई 11 की तरह व्यवहार करता है।

Answer 1

यह एक बग हो रहा है। एक तत्व जो फ्लेक्स कंटेनर और फ्लेक्स आइटम दोनों है, उनके बच्चों के आंतरिक आयामों को अनदेखा कर रहा है अगर वे flex-basis के माध्यम से सेट हैं, इसके बजाए इसके बच्चों की सामग्री की चौड़ाई/ऊंचाई को मापने के लिए चुनते हैं। यह विडंबना है कि आईई 11/एज एकमात्र ब्राउज़र है जो इसे सही ढंग से कार्यान्वित करता है।

Chromium bug tracker

Answer 2

ऐसा इसलिए है क्योंकि आईई 11 अलग-अलग फ्लेक्स का समर्थन करता है (केवल आंशिक रूप से तकनीकी रूप से समर्थन करता है)। आईई 11 को तीसरे तर्क में एक यूनिट जोड़ने की आवश्यकता है, फ्लेक्स-बेस प्रॉपर्टी नीचे स्रोत में एमएसडीएन दस्तावेज देखें।

तो यूनिटलेस फ्लेक्स-आधार मानों के साथ फ्लेक्स शॉर्टंड घोषणाएं अनदेखा की जाती हैं।

फ्लेक्स-आधार न्यूनतम चौड़ाई है, एक कंटेनर हो सकता है, तो यह आपके अन्य नियमों के आधार पर बढ़ेगा/सिकुड़ जाएगा। चौड़ाई और फ्लेक्स-आधार के रूप में चौड़ाई को एक ही समय में उपयोग करने की आवश्यकता नहीं है, क्योंकि वे एक्स-ब्राउज़र संगतता के साथ संघर्ष करते हैं।

मैंने व्याख्या करने में सहायता के लिए भी अपना कोडपेन अपडेट किया है। कृपया यहाँ देखें: http://codepen.io/mattpark22/pen/wWqKpz

अब आप देख सकते हैं कि अलग ढंग से ब्राउज़रों के साथ फ्लेक्स संभाल:

flex-basis: 258px; 
width: 258px; 

मैं भी

display: flex; 

हटा दिया है .outer से - यह भी एक प्रभाव पड़ रहा था।

स्रोत: http://caniuse.com/#search=flex-basis

स्रोत: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

स्रोत: https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx