मैं निम्नलिखित समस्या से संबंधित कुछ सलाह ढूंढ रहा हूं।

मैं फ्लेक्सबॉक्स के अंदर कई तत्वों को रखना चाहता हूं क्योंकि यह सुविधा इसके परिवेश के अनुकूल होगी। इन वस्तुओं में से एक के नीचे मैं एक परिकलित तत्व की स्थिति बनाना चाहता हूं जो इसके ऊपर के तत्व के आकार का उपयोग करेगा। तो संक्षेप में इसका एक निश्चित (लेकिन गणना) आकार है।

मैंने गणना किए गए तत्व को फ्लेक्सबॉक्स में रखकर समस्या को हल करने का प्रयास किया, लेकिन यह समग्र व्यवहार को नष्ट कर देता है।

यह मोटे तौर पर इस तरह दिखना चाहिए:

<Label w/o shrink> <input element, can grow>             <Label w/o shrink>
                   <some rectangle, calculated size> 

वांछित लेआउट - एक लिंक क्योंकि मुझे चित्र पोस्ट करने की अनुमति नहीं है

संलग्न उदाहरण में समस्या का jsfiddle उदाहरण मैं दो के संयोजन में एक इनपुट तत्व का उपयोग कर रहा हूं व्यवहार का वर्णन करने के लिए लेबल और एक परिकलित आयत। समस्या के लिए एक सामान्य उदाहरण के रूप में आयत के बारे में सोचें।

खिड़की को बड़ा करने के मामले में खिड़की का आकार बदलना एक आकर्षण की तरह काम करता है। आकार कम होने पर समस्या होती है।

फ्लेक्स केवल गैर-निश्चित आकार वाले तत्वों के आकार को कम कर सकता है, जैसे इनपुट तत्व। मेरे परिकलित आयत का एक निश्चित आकार है। तो यह आकार इनपुट + आयत कंटेनर के किसी भी संकोचन को रोकता है।

विचार 1: परिकलित आइटम को संबंधित इनपुट से थोड़ा छोटा बनाएं ताकि कंटेनर स्वयं सिकुड़ सके क्योंकि उसमें जगह है। इनपुट सिकुड़ जाएगा और इस तरह परिकलित आयत भी सिकुड़ जाएगी। देखें jsfiddle एक छोटे आयत के साथ

यह कुछ हद तक काम करता है। यदि खिड़की का आकार बदलते समय माउस धीरे-धीरे चलता है/आकार में परिवर्तन धीरे-धीरे होता है, तो सबकुछ ठीक है। जैसे ही प्रतिपादन को बनाए रखने के लिए संकोचन बहुत तेजी से होता है, ऊपर वर्णित समस्या फिर से होती है।

विचार 2: परिकलित तत्व को बिल्कुल सही स्थिति में रखकर उस पर ध्यान न दें. यहां देखें: jsfiddle सापेक्ष और पूर्ण स्थिति के साथ

मैंने बाहरी तत्व को अपेक्षाकृत और आंतरिक (गणना तत्व w/"स्थिर" चौड़ाई) को पूरी तरह से तैनात करने के लिए परिभाषित किया है। ऐसा करने से तत्व प्रवाह से लिया जाएगा और सब कुछ ठीक काम करता है। लगभग. चूंकि अब आयत को नजरअंदाज कर दिया गया है, शेष लेआउट भी टूट गया है। एक बड़े संदर्भ में एक घटक के रूप में इस सुविधा के उपयोग के कारण यह स्वीकार्य नहीं है। उदाहरण में अंतिम लेबल बहुत ऊपर स्थित हो जाता है क्योंकि div आयत को ध्यान में नहीं रखेगा।

मेरा सवाल अब यह है कि क्या आपके पास और सलाह है। यदि संभव हो तो मैं जावास्क्रिप्ट में किसी भी गणना से बचना चाहता हूं और सीएसएस से संबंधित विकल्पों का उपयोग करके समस्या को हल करना चाहता हूं। (अन्यथा getBoundingClientRect() की और जानकारी का उपयोग करना - जैसे कि x स्थिति - किसी तरह से एक विकल्प हो सकता है (?) -> इस तरह से मैं फ्लेक्सबॉक्स से आयत को पूरी तरह से हटा सकता हूं और इसे "हाथ से" रख सकता हूं। वांछित स्थिति में)।

मैं आगे के किसी भी विचार से खुश हूं।

0
mikeMyer42 30 जिंदा 2020, 14:40

2 जवाब

सबसे बढ़िया उत्तर

जिन लोगों के पास एक समान समस्या हो सकती है, उनके लिए जेम्स समाधान को अनुकूलित करने का प्रयास करते समय मैं एक और दृष्टिकोण लेकर आया हूं।

यह jfiddle देखें: jsfiddle अतिप्रवाह और न्यूनतम-चौड़ाई का उपयोग कर

मैंने अपने पहले समाधान के बारे में क्या बदल दिया: संकोचन के साथ मुद्दा कुछ चिकन-और-अंडे का मुद्दा है: फ्लेक्सबॉक्स संकोचन के लिए अनुमति देने वाले तत्वों की तुलना में अधिक सिकुड़ नहीं सकता है, लेकिन तब मेरा गणना तत्व केवल तभी सिकुड़ता है जब कोई अन्य तत्व सिकुड़ता है जो बदले में है फ्लेक्सबॉक्स द्वारा खुद को सिकुड़ने में असमर्थ होने से रोका जाता है, जो हमें शुरुआत में वापस लाता है।

तो मेरे प्रश्न में मैंने फ्लेक्सबॉक्स को पूरी तरह से स्थितिबद्ध करके तत्व को अनदेखा करने का प्रयास किया - जो समग्र लेआउट को गड़बड़ कर देता है।

संकोचन की अनुमति देने के लिए मैं एक समाधान लेकर आया हूं: कुछ तत्वों को फ्लेक्सबॉक्स को ओवरफ्लो करने में सक्षम बनाएं और min-width को auto से अलग करने की अनुमति दें।

इस तरह मैं गणना किए गए तत्व को overflow फ्लेक्सबॉक्स की अनुमति देता हूं (जो फ्लेक्सबॉक्स को आइटम को अनदेखा करता है)। ध्यान दें कि आप कुछ तत्वों की न्यूनतम-चौड़ाई को भी समायोजित करना चाहते हैं।

तो अंत में मैंने एक दूसरा फ्लेक्सबॉक्स पेश किया जो गणना किए गए तत्व को समाहित करता है। यह तत्व और साथ ही अंदर की वस्तुएं दोनों अतिप्रवाह और सिकुड़न दोनों की अनुमति देती हैं। (कोई तत्वों को थोड़ा सरल करने में सक्षम हो सकता है)।

इस प्रकार परिकलित तत्व अपनी सीमाओं को भंग/अतिप्रवाह कर सकता है और समग्र निर्माण सिकुड़ सकता है। सिकुड़न के कारण गणना किए गए तत्व का आकार तुरंत बदल जाता है - इसलिए अस्थायी अतिप्रवाह तुरंत ठीक हो जाता है।

आप इस दृष्टिकोण की तुलना जेम्स के विचार से कर सकते हैं और तय कर सकते हैं कि आपकी परेशानी के लिए कौन सा बेहतर है।

0
mikeMyer42 1 फरवरी 2020, 17:36

यह समस्या computed-element-container चौड़ाई की गणना करने के लिए इनपुट someInput की चौड़ाई का उपयोग करने के कारण हुई प्रतीत होती है। यदि आप इसके बजाय फ्लेक्स आइटम चौड़ाई का उपयोग करते हैं तो इसे काम करना चाहिए। मैंने इसे दिखाने के लिए आपके jsfiddle को अपडेट किया है - मैंने मूल के ऊपर दूसरा फ्लेक्स कंटेनर बनाया है , जिसमें समान तीन आइटम हैं। मैं फिर आईडी के साथ एक तत्व के आधार पर चौड़ाई की गणना करता हूं: content-box। उम्मीद है कि यह समाधान खोजने में आपकी सहायता करेगा:

https://jsfiddle.net/jamarmstrong/h9rz1t4b/

0
James 30 जिंदा 2020, 19:20