निरपेक्ष एक फ्लेक्स कंटेनर अगर मैं एक फ्लेक्स कंटेनर में संपत्ति <code>justify-content: space-between</code> के साथ कई तत्व अभी भी IE और Firefox

Question

में आइटम के रूप में माना जाता है में आइटम तैनात है और मैं निरपेक्ष स्थिति उनमें से एक के रूप में और पता चला है, फ्लेक्स प्रवाह से निकालना चाहते हैं यहाँ:

यह क्रोम में काम करता है लेकिन IE और Firefox में नहीं के रूप में पूर्ण तैनात तत्व 0 चौड़ाई के रूप में, लेकिन अभी भी फ्लेक्स प्रवाह में माना जाता है:

इस रखने के लिए एक ठीक है लेआउट के रूप में है?

CodePen

Answer 1

ऐसा लगता है कि यह सब लेता है तीन आसान चरणों

(Demo)

1) है। प्रत्येक बच्चे

img { 
    margin-left: auto; 
    margin-right: auto; 
} 

2) पर ऑटो पर बाएं और दाएं मार्जिन सेट करें। 0

img:nth-child(2) { 
    margin-left: 0; 
} 

3) करने के लिए पहले बच्चे पर छोड़ दिया मार्जिन सेट करें। 0

img:last-child { 
    margin-right: 0; 
} 

करने के लिए पिछले बच्चे पर सही मार्जिन सेट आप इन चरणों के किसी भी चूक जाते हैं तो यह ठीक से काम नहीं करेगा

यह फ़ायरफ़ॉक्स और क्रोम में काम करता है, मैं इसे किसी भी अन्य ब्राउज़र में परीक्षण नहीं किया ।

संपादित करें:

@Pontiacks ​​

के लिए धन्यवाद

जाहिर है आप दूर img:nth-child(2)

updated jsfiddle

Answer 2

को margin-left: auto को जोड़ने के साथ मैं इस विशेष हल करने के लिए एक बहुत सरल हैक है प्राप्त कर सकते हैं मुसीबत।

div { 
 
    background-color: #66BB66; 
 
    display: flex; 
 
    position: fixed; 
 
    width: 100%; 
 
    justify-content: space-between; 
 
} 
 
div > img:nth-child(2) { 
 
    position: absolute; 
 
    left: 0; 
 
}

<div> 
 
    <img src="http://www.fillmurray.com/150/150"> 
 
    <img src="http://www.fillmurray.com/150/100"> 
 
    <img src="http://www.fillmurray.com/150/150"> 
 
</div>

बस डोम में आदेश को बदल। जहां भी आप इसे डालते हैं, वहां बिल्कुल स्थित तत्व तत्व अभी भी स्थित है, और हालांकि फ्लेक्सबॉक्स अभी भी इसका प्रवाह करता है जैसे प्रवाह में है, प्रवाह में (डोम में) स्थिति इसकी स्थिति को ब्राउज़रों के समान स्थान आवंटित करने के लिए फ्लेक्सबॉक्स का कारण बनती है।

मेरा मानना ​​है कि आप एक ही चीज़ को प्राप्त करने के लिए ऑर्डर प्रॉपर्टी का उपयोग कर सकते हैं।

Answer 3

मैंने पाया कि इनमें से कोई भी मेरे मामले को संभाला, जैसा कि मैंने तीन तत्वों है मैं समान रूप से की है, और एक पूरी तरह से तैनात भाई चाहते हैं। मुझे लगता है कि इस मामले में चाल समान रूप से दूरी के लिए पहले तत्व में margin-right: auto जोड़ने के लिए है, और margin-left: auto समान तत्व होने के लिए अंतिम तत्व में है।आप इसे इस पहेली पर देख सकते हैं http://jsfiddle.net/tch6y99d/