फ्लेक्सबॉक्स आइटम छवियां अपने शुरुआती आकार के अनुसार अलग-अलग आकार क्यों बदलती हैं?

Question

मेरे पास चार छवियां हैं: दो छोटे, दो बड़े (एचटीएमएल में दिखाए गए आयाम)। उनके पास उनकी आईएमजी चौड़ाई 100% पर सेट है लेकिन उनके मूल div को एक विशिष्ट चौड़ाई पर सेट किया गया है। जब मैं ब्राउज़र विंडो का आकार बदलता हूं तो छोटी छवियां कम हो जाती हैं और बड़े लोग तुरंत नहीं जाते हैं।

मेरे पास आईएमजी के चारों ओर divs और हरी सीमा के चारों ओर एक लाल सीमा है। छोटी छवियों 'हरे रंग की सीमाएं बड़े लोगों से पहले घूमती हैं। ऐसा क्यों है?

http://jsfiddle.net/brcrnj80/6/

img { 
    border: 3px solid green; 
    width: 100%; 
} 

.item { 
    border: 1px solid red; 
    max-width: 250px; 
    min-width: 60px; 
    margin: 10px; 
} 

धन्यवाद

Answer 1

tl; डॉ: आइटम अलग तरह से आकार बदलने रहे हैं क्योंकि वे एक अलग flex-basis, जो छवि आकार के आधार पर और मूल्य है कि वे ठोके शुरू कर रहा है (सिकुड़) से। प्रत्येक वस्तु को कम करना पड़ता है, लेकिन बड़ी चीजें एक बड़े शुरुआती बिंदु से कम हो जाती हैं, इसलिए वे सिकुड़ने के बाद भी बड़े होते हैं। (उनके max-width से बड़े होने से रोकने के लिए देर से इन-द-एल्गोरिदम "क्लैंप" भी है; इस मामले में बड़ी चीजें पागल हो रही हैं। लेकिन महत्वपूर्ण बात यह है कि उनके घटते से उनके flex-basis, और max-width क्लैंप एक बाद का विचार है)

ठीक:। आप प्रत्येक फ्लेक्स आइटम एक ही फ्लेक्स-आधार देते हैं, जैसे flex-basis:250px (उनके max-width के समान), आपको शायद वह परिणाम मिल जाएगा जो आप ढूंढ रहे हैं। अपडेट किया गया बेला: http://jsfiddle.net/brcrnj80/10/

(के रूप में एक और जवाब में बताया गया है, flex: 1 1 0 (जो और अधिक संक्षेप में flex:1 के रूप में व्यक्त किया जा सकता है) भी काम करेंगे - कि flex-basis 0 के लिए सेटिंग, और को फ्लेक्स आइटम बढ़ने मिलती है (के बजाय है उन्हें करने के लिए मजबूर हटना) वहाँ से, उनकी अधिकतम-चौड़ाई अप करने के लिए उत्पादन एक ही परिणाम है, बस एक अलग मार्ग के माध्यम से)

अधिक व्याख्या:।। यहाँ क्या होता है:

1. डिफ़ॉल्ट रूप से, सब कुछ flex-basis:auto है, जो इस मामले में है कि प्रत्येक फ्लेक्स आइटम अपनी छवि की आंतरिक चौड़ाई पर फ्लेक्सिंग शुरू करता है। तो आपके विशाल-छवि फ्लेक्स आइटमों में एक बड़ा फ्लेक्स आधार होता है, और आपकी छोटी छवि फ्लेक्स आइटमों में एक छोटा फ्लेक्स आधार होता है।
2. हम देखते हैं कि फ्लेक्स आइटम 'flex-basis मानों का योग कंटेनर से बड़ा है या नहीं। वे हैं (क्योंकि आपकी कुछ छवियां बहुत बड़ी हैं)। तो, हमें चीजों को कम करना है।
3. हम प्रत्येक फ्लेक्स आइटम को "काफी", को flex-basis से शुरू करते हैं, सभी आइटम फिट करने के लिए जो भी भाग आवश्यक है, उसे कम करें। तो उदा। प्रत्येक आइटम इसकी चौड़ाई का 1/4 खो देता है, उदाहरण के लिए (यदि यह सही कंटेनर फिट करने के लिए सही अंश होता है)।
4. अब, हम जांचते हैं कि इनमें से कोई भी "टेंटेटिव" आइटम आकार आइटम के max-width का उल्लंघन करता है या नहीं। बड़ी छवियों के साथ आपकी फ्लेक्स आइटम इस स्थिति में उनके max-width का उल्लंघन करेगा, उदाहरण के लिए भले ही हम अपने आकार के 1/4 (मेरे उदाहरण में) ले जाएं, फिर भी वे अपने max-width:250px से काफी बड़े हैं।इस तरह के किसी भी उल्लंघन के लिए, हम अपनी अधिकतम चौड़ाई पर आइटम को फ्रीज करें, और हम घटते प्रक्रिया को पुनरारंभ करें। (हम min-width उल्लंघनों के लिए कुछ ऐसा करते हैं।)
5. पुनरारंभ करने वाली प्रक्रिया में, बड़ी छवियां 250px-width पर जमे हुए हैं, और छोटी छवियां सभी सिकुड़ने के लिए ज़िम्मेदार हैं।

इसलिए यदि हर किसी के पास 250px चौड़ाई रखने के लिए पर्याप्त जगह नहीं है, तो आपके छोटे फ्लेक्स आइटम सभी सिकुड़ने के लिए समाप्त होते हैं। (जब तक हम पर्याप्त नहीं हैं कि को कम करने के पहले दौर में बड़े आइटम 250px से कम हो जाएंगे - उदाहरण के लिए यदि हम प्रत्येक आइटम को 90% तक कम कर रहे हैं, तो कहें। हालांकि, छोटी चीजें 90% तक भी कम हो जाएंगे, और वे min-width:60px से कम होंगे, और वे उस आकार में जमे हुए होंगे और हम ऊपर वर्णित उसी तरह से सिकुड़ने को फिर से शुरू करेंगे)।

यदि आप उत्सुक हैं तो अधिक जानकारी के लिए the "Resolving Flexible Lengths" chunk of the spec देखें।

Answer 2

किसी ने पहले यहां जवाब पोस्ट किया (मैं लगभग सकारात्मक हूं, मुझे यकीन नहीं है कि इसे क्यों हटाया गया था?)।

हाँ, यह क्रोम और फ़ायरफ़ॉक्स के बीच एक प्रतिपादन अंतर है, लेकिन यह आसानी से इस से ठीक किया गया:

.item { flex: 1 1 0; } 

यह ब्राउज़र है कि सभी फ्लेक्स आइटम 0 चौड़ाई के साथ बाहर शुरू कर देना चाहिए बताता है, और सब से बढ़ने शेष जगह को भरने के लिए एक ही दर।