दिलचस्प पोस्ट
पंक्ति 1 से पहले कॉलम में पहले खाली सेल का चयन करें। (ऑफ़सेट का उपयोग किए बिना) MVC प्रगति बार थ्रेडिंग Android में ViewPager के लिए डिफ़ॉल्ट पृष्ठ सेट करें किसी सूची से पैरामीटर निकालने और उन्हें फ़ंक्शन कॉल करने के लिए कैसे करें एंड्रॉइड में कम्पास के बियरिंग / प्लेसमेंट की गणना करें अक्षांश, देशांतर से ज़िप कोड प्राप्त करें? AsyncTask क्लास से डेटा वापस करें क्या jQuery में एक स्टाइल चयनकर्ता है? जांचें कि वर्तमान थ्रेड मुख्य थ्रेड है या नहीं क्या पूरी परियोजना के निर्माण के बिना एक JSF पृष्ठ को चलाने का कोई तरीका है? फ़ाइल / फ़ोल्डर पहुंच अनुमति की जांच एक आर सत्र में उपलब्ध स्मृति का प्रबंधन करने के लिए ट्रिक्स एंड्रॉइड ऐप क्रैशिंग (टुकड़ा और एक्सएमएल ऑनक्लिक) क्लोन और मूल रिमोट रिपॉजिटरी के बीच git diff मैं अनचाहे डाली चेतावनियों को कैसे संबोधित करूं?

फ़ैक्सफ़ॉक्स और IE11 में सामान्य प्रवाह से फ्लेक्स आइटम को हटाया नहीं गया है

हमारे पास सामग्री के साथ दो divs और एक तीसरी div है जो पूर्ण स्थिति वाला पृष्ठभूमि है

कंटेनर एक फ्लेक्सबॉक्स है

क्रोम और सफारी में सभी काम ठीक हैं, लेकिन फ़ायरफ़ॉक्स और आईई 11 पूर्ण स्थिति वाली डिवी की गणना करता है, और डिवाओं के बीच स्थान वितरित करता है जैसे कि एक पंक्ति में 3 डिवाज़ हैं

यहां छवि विवरण दर्ज करें

मैंने जेएसफ़ैड उदाहरण बनाया है क्या इस बग को ठीक करने का कोई तरीका है? https://jsfiddle.net/s18do03e/2/

div.container { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-between; width: 100%; outline: 1px solid; } div.c1 { background: #aaeecc; width: 100px; position: relative; z-index: 50; top: 20px; display: flex; } div.c2 { background: #cceeaa; width: 200px; position: relative; z-index: 50; top: 20px; display: flex; } div.bg { background: #ccc; width: 100%; height: 100%; z-index: 0; left: 0px; top: 0px; position: absolute; display: flex; } 
 <div class="container"> <div class="c1">Content 1</div> <div class="c2">Content 2</div> <div class="bg">Background</div> </div> 

Solutions Collecting From Web of "फ़ैक्सफ़ॉक्स और IE11 में सामान्य प्रवाह से फ्लेक्स आइटम को हटाया नहीं गया है"

ऐसा इसलिए हो रहा है क्योंकि justify-content: space-between; वस्तुओं को समान रूप से वितरित करें शुरूआत में पहला आइटम, अंत में अंतिम। <div class="c1">Content 1</div> और <div class="c2">Content 2</div> इस तरह से सिर्फ पट <div class="bg">Background</div>

 <div class="container"> <div class="c1">Content 1</div> <div class="bg">Background</div> <div class="c2">Content 2</div> </div> 

आप https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content पर कारण देख सकते हैं

जैसे आपने इस प्रश्न में लिखा था:

फ़ायरफ़ॉक्स निरपेक्ष तैनात div की गणना करता है, और divs के बीच स्थान वितरित करता है जैसे कि एक पंक्ति में 3 डिवाइन हैं

फ़ायरफ़ॉक्स तीसरे .bg ( .bg ) पर विचार कर रहा है, जो पूरी तरह से तैनात है, एक इन- फ्लेक्स फ्लेक्स आइटम है और इसे अपने space-between गणना के space-between फैक्टर कर रहा है। (IE11 यह भी करता है, क्रोम और एज इसे अनदेखा करते हैं।)

स्पष्ट रूप से, यह वर्तमान फ्लेक्स बॉक्स के अनुपालन में नहीं है:

4.1। बिल्कुल-स्थिति वाले फ्लेक्स बच्चे

चूंकि यह प्रवाह से बाहर है, फ्लेक्स कंटेनर के एक बिल्कुल-तैनात बच्चे फ्लेक्स लेआउट में भाग नहीं लेते हैं।

यहां कुछ समाधान दिए गए हैं:

क्यों नहीं अन्य दो के बीच बिल्कुल स्थित div को स्थानांतरित करें?

इसके अलावा:

 <div class="container"> <div class="c1">Content 1</div> <div class="c2">Content 2</div> <div class="bg">Background</div> </div> 

इसे इस्तेमाल करे:

 <div class="container"> <div class="c1">Content 1</div> <div class="bg">Background</div> <div class="c2">Content 2</div> </div> 
 div.container { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-between; width: 100%; outline: 1px solid; } div.c1 { background: #aaeecc; width: 100px; position: relative; z-index: 50; top: 20px; display: flex; } div.c2 { background: #cceeaa; width: 200px; position: relative; z-index: 50; top: 20px; display: flex; } div.bg { background: #ccc; width: 100%; height: 100%; z-index: 0; left: 0px; top: 0px; position: absolute; display: flex; } 
 <div class="container"> <div class="c1">Content 1</div> <div class="bg">Background</div> <div class="c2">Content 2</div> </div> 

कभी-कभी यह फिर से ऑर्डर सामग्री के लिए संभव नहीं है, उदाहरण के लिए ::before और ::after का उपयोग करते समय उन मामलों में, आप तत्वों को मैन्युअल रूप से order कर सकते हैं

आपके मामले में, आपको करने की आवश्यकता होगी:

 .c1 { order: -1; } .c2 { order: 10; } 

order प्रॉपर्टी flex स्पेक का हिस्सा है और आपको फ्लेक्स आइटम ( एमडीएन पर संदर्भ ) को फिर से ऑर्डर करने देता है। यह कई प्रयोजनों के लिए बहुत आसान है, इसमें शामिल है।

मैं 1 का इस्तेमाल करता हूं क्योंकि मूल्य क्रमशः है, इसलिए इसे एक ऋणात्मक संख्या में सेट करना सुनिश्चित करता है कि यह सभी अन्य चूक से पहले होता है और आपको इसके लिए मान निर्दिष्ट करने की आवश्यकता नहीं है ::before इसी कारण से, 10 का उपयोग सुनिश्चित करता है कि दूसरा डिवीजन अंतिम रूप से आता है, भले ही आप कंटेनर में तत्वों का एक गुच्छा जोड़ते हैं। आप इसे 100 या जो कुछ भी बढ़ा सकते हैं

फिर भी, फ़ायरफ़ॉक्स का व्यवहार प्रतिद्वंद्वी लगता है position: absolute सामान्य सामान्य प्रवाह के लिए सामान्य रूप से तत्व को हटा देता है और मुझे उम्मीद है कि यह तत्व flex प्रवाह से हटा दिया जाएगा, बस सफारी और क्रोम में। मुझे यकीन नहीं है कि क्या यह कल्पना स्पष्टीकरण करता है।

एक विकल्प के रूप में आप सामग्री चयनकर्ता (संपत्तियों) के अंदर फ्लेक्स संपत्ति का उपयोग कर सकते हैं:

  div.c1 { background: #aaeecc; width: 100px; position: relative; z-index: 50; top: 20px; display: flex; flex: 1; /* add this */ } 

इससे फ्लेक्स बढ़ने लगेगा यह ठीक वही नहीं हो सकता है कि आपको क्या चाहिए, लेकिन हो सकता है कि यह किसी और को मदद करता है जो सामग्री डिवाओं को पुन: क्रॉर्कर नहीं कर सकते या फ्लेक्स आवरण से उन्हें बाहर निकाल नहीं सकते हैं।

यहां डेमो है: https://jsfiddle.net/s18do03e/14/