फ्लेक्सबॉक्स: यह लचीला बॉक्स कितना बड़ा है?

मैं फ्लेक्सबॉक्स सीएसएस तकनीक की सुविधाओं पर अनुवाद प्रकाशित करना जारी रखता हूं।

निम्नलिखित लेख चक्र से प्रकाशित किए गए हैं:

1. फ्लेक्सबॉक्स कंटेनर बनाते समय क्या होता है ।
2. आप सभी को Flexbox में संरेखण के बारे में जानना चाहिए ।

संक्षिप्त सारांश

पिछले दो लेखों में, हमने देखा कि फ्लेक्स कंटेनर बनाने पर क्या होता है, और हमने संरेखण पर भी ध्यान दिया। इस बार हम फ्लेक्सबॉक्स में अक्सर भ्रमित आकार की समस्या को देखेंगे । फ्लेक्सबॉक्स कैसे तय करता है कि आइटम कितने बड़े होने चाहिए?

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

फ्लेक्स आइटम का मूल प्रदर्शन

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

Ris_1। एक ही लाइन पर फ्लेक्स आइटम प्रदर्शित किए जाते हैं।

यदि मैं इन तत्वों में अधिक पाठ जोड़ता हूं, तो वे धीरे-धीरे कंटेनर को भर देंगे, और पाठ लपेटना शुरू हो जाएगा। तत्वों को प्रत्येक में पाठ की मात्रा के अनुरूप कंटेनर स्थान का एक हिस्सा सौंपा गया है - पाठ की लंबी लाइन के साथ एक तत्व को अधिक स्थान सौंपा गया है। इसका मतलब है कि हमें बहुत सारे टेक्स्ट के साथ एक लंबा संकीर्ण कॉलम नहीं मिलेगा जब अगले तत्व में केवल एक शब्द होता है।

Ris_2। अधिक लम्बी वस्तु के लिए अधिक स्थान देने के लिए स्थान आवंटित किया जाता है

यह व्यवहार शायद आपके लिए परिचित है यदि आपने कभी Flexbox का उपयोग किया है। लेकिन, शायद आप सोच रहे थे कि ब्राउज़र आकार की गणना कैसे करता है, क्योंकि यदि आप कई आधुनिक ब्राउज़रों को देखते हैं, तो आप देखेंगे कि वे सभी ऐसा ही करते हैं।

ऐसा इसलिए है क्योंकि इस तरह की सुविधाओं को विनिर्देश में काम किया गया है, यह सुनिश्चित करता है कि जो कोई भी एक नए ब्राउज़र या अन्य उपयोगकर्ता एजेंट में Flexbox को लागू करता है वह जानता है कि यह गणना कैसे काम करनी चाहिए। हम अपने लिए यह जानकारी खोजने के लिए विनिर्देशन का उपयोग कर सकते हैं।

आंतरिक और बाहरी आयामों की गणना के लिए सीएसएस विनिर्देश (CSS आंतरिक और बाहरी साइज़िंग)

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

यह पता लगाने के लिए कि फ्लेक्सबॉक्स में उपयोग किया गया आयाम कैसे बनाया गया है , आपको फ्लेक्सबॉक्स विनिर्देश में देखने की आवश्यकता है। यह थोड़ा सा लग सकता है जैसे आप आगे और पीछे कूद रहे हैं, इसलिए मैं यहां कुछ प्रमुख परिभाषाओं का वर्णन करूंगा जिनका उपयोग मैं इस लेख के बाकी हिस्सों में करूंगा।

पसंदीदा आकार

पसंदीदा तत्व आकार चौड़ाई या ऊँचाई या इन गुणों के तार्किक उपनाम इनलाइन-आकार और ब्लॉक-आकार के बीच निर्धारित होता है। का लाभ उठाते हुए:

.box { width: 500px; } 

या एक इनलाइन आकार तार्किक उर्फ ​​के साथ:

 .box { inline-size: 500px; } 

आप दावा कर रहे हैं कि आप चाहते हैं कि आपका ब्लॉक 500 पिक्सल चौड़ा हो या एक पंक्ति में 500 पिक्सल।

न्यूनतम सामग्री का आकार (MIN-CONTENT SIZE)

न्यूनतम सामग्री आकार सबसे छोटी सामग्री का आकार है जो एक तत्व को अतिप्रवाह के बिना पकड़ सकता है। यदि तत्व में पाठ है, तो सभी प्रोग्राम ट्रांसफर उपाय किए जाने चाहिए।

अधिकतम सामग्री आकार (MAX-CONTENT SIZE)

अधिकतम सामग्री आकार सबसे बड़ा सामग्री आकार है जो एक आइटम धारण कर सकता है। यदि तत्व में स्वरूपण के बिना पाठ है, तो इसे एक लंबी निरंतर रेखा के रूप में प्रदर्शित किया जाएगा।

लचीले तत्व का मुख्य आकार (फ्लेक्स आइटम मुख्य आकार)

एक लचीले तत्व का मुख्य आकार मुख्य दिशा में इसका आकार है। यदि आप अंग्रेजी में एक स्ट्रिंग में काम करते हैं, तो मुख्य आकार चौड़ाई है। अंग्रेजी में एक कॉलम में, मुख्य आकार ऊंचाई है।

तत्वों में न्यूनतम आकार और मुख्य दिशा में न्यूनतम और अधिकतम को इंगित करने के गुण भी होते हैं, जिन्हें न्यूनतम-चौड़ाई या न्यूनतम ऊंचाई के रूप में परिभाषित किया जाता है।

फ्लेक्स आइटम का आकार संभालना

अब जब हमने कुछ शब्दों को परिभाषित किया है, तो हम देख सकते हैं कि हमारे फ्लेक्स तत्वों की गणना कैसे की जाती है। फ्लेक्स गुणों के प्रारंभिक मूल्य इस प्रकार हैं:

• फ्लेक्स-ग्रो : 0;
• फ्लेक्स-हटना : 1;
• फ्लेक्स-आधार : ऑटो।

फ्लेक्स- बेस वह आधार है जहां से आकार की गणना की जाती है। यदि हम फ्लेक्स-बेस को 0 पर सेट करते हैं और फ्लेक्स-ग्रो को 1 करते हैं, तो हमारे सभी तत्वों में एक प्रारंभिक चौड़ाई नहीं होगी, इसलिए फ्लेक्स कंटेनर में जगह समान रूप से वितरित की जाएगी, प्रत्येक तत्व के लिए एक ही स्थान का आकार निर्दिष्ट करना।

इस बीच, यदि फ्लेक्स-बेस ऑटो और फ्लेक्स-ग्रो करने के लिए सेट है : 1 , केवल खाली स्थान आवंटित किया जाएगा, अर्थात। सामग्री के बिना स्थान।

ऐसी स्थिति में जहां कोई खाली जगह नहीं है, उदाहरण के लिए, जब हमारे पास एक पंक्ति में फिट होने की तुलना में अधिक सामग्री होती है, तो कुछ भी वितरित नहीं किया जाता है।

इससे हमें पता चलता है कि ऑटो का मतलब क्या है यह जानना महत्वपूर्ण है यदि हम जानना चाहते हैं कि फ्लेक्सबॉक्स हमारे तत्वों के आयामों को कैसे संभालता है। मूल्य ऑटो हमारे शुरुआती बिंदु होंगे।

ऑटो की परिभाषा (ऑटो को परिभाषित करना)

जब सीएसएस में ऑटो को किसी चीज के मूल्य के रूप में सौंपा जाता है, तो इस संदर्भ में इसका बहुत विशिष्ट अर्थ होगा, जो देखने लायक है। CSS वर्किंग ग्रुप किसी भी संदर्भ में ऑटो का मतलब क्या है, यह जानने में बहुत समय व्यतीत करता है, क्योंकि फेंटैसाई के विशेष संपादक के साथ यह बातचीत बताती है।

विनिर्देशन में, हम इस बारे में जानकारी पा सकते हैं कि फ्लेक्स-बेस के रूप में उपयोग किए जाने पर ऑटो का क्या अर्थ है। उपरोक्त शर्तों को हमें इस कथन का विश्लेषण करने में मदद करनी चाहिए।

फ्लेक्स तत्व के लिए ऑटो कीवर्ड को " फ्लेक्स-बेस " के रूप में निर्दिष्ट करना मुख्य आकार की संपत्ति का मूल्य देता है। यदि यह मान अपने आप में ऑटो है, तो सामग्री मूल्य का उपयोग किया जाता है।

इस प्रकार, यदि हमारा फ्लेक्स-बेस ऑटो पर सेट है, तो फ्लेक्सबॉक्स मुख्य आकार की संपत्ति के मूल्य को देखेगा। यदि हमारे किसी फ्लेक्स आइटम को हम चौड़ाई देते हैं, तो हमारे पास एक मुख्य आकार होना चाहिए। नीचे दिए गए उदाहरण में, सभी तत्वों की चौड़ाई 110px है, इसलिए इस मान का उपयोग मुख्य आकार के रूप में किया जाता है प्रारंभिक फ्लेक्स-बेस मूल्य ऑटो है ।

हालांकि, हमारे मूल उदाहरण में, ऐसे तत्व हैं जिनकी चौड़ाई नहीं है, जिसका अर्थ है कि उनका मुख्य आकार ऑटो है , और इसलिए हमें निम्नलिखित कथन पर आगे बढ़ना होगा: "यदि यह मान अपने आप में ऑटो है, तो सामग्री मूल्य का उपयोग किया जाता है।"

अब हमें यह देखना होगा कि कीवर्ड सामग्री के बारे में कल्पना क्या कहती है । यह एक और मूल्य है जिसे आप फ्लेक्स-बेस संपत्ति के लिए (ब्राउज़र समर्थन के साथ) उपयोग कर सकते हैं, उदाहरण के लिए:

 .item { flex: 1 1 content; } 

विनिर्देशन सामग्री को इस प्रकार परिभाषित करता है:

फ्लेक्स तत्व की सामग्री के आधार पर ऑटो आकार का संकेत देता है। (आमतौर पर यह अधिकतम सामग्री आकार के बराबर होता है, लेकिन पहलू अनुपात, आंतरिक आकार प्रतिबंध और ऑर्थोगोनल धाराओं को संभालने के लिए सेटिंग्स के साथ।

टेक्स्ट वाले फ्लेक्स तत्वों के साथ हमारे उदाहरण में, हम कुछ और जटिल सेटिंग्स को अनदेखा कर सकते हैं और सामग्री को अधिकतम-सामग्री के आकार के रूप में मान सकते हैं।

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

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

लचीला लंबाई संकल्प

यह इस बिंदु पर है कि विनिर्देश देखने के लिए काफी मुश्किल हो जाता है, लेकिन आपको चरणों के माध्यम से जाने की आवश्यकता है, जो इस प्रकार हैं:

सबसे पहले, सभी तत्वों का मुख्य आकार जोड़ें और देखें कि क्या यह कंटेनर के खाली स्थान से अधिक या कम है।

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

Ris_3। पहले मामले में, हमारे तत्वों में वृद्धि के लिए जगह उपलब्ध है।

यदि कंटेनर का आकार योग से कम है, तो हम फ्लेक्स-हटना पैरामीटर में रुचि रखेंगे, क्योंकि हमें कंटेनर में फिट होने के लिए तत्वों को संपीड़ित करने की आवश्यकता है।

Ris_4। दूसरे मामले में, हमारे तत्व बहुत बड़े हैं और कंटेनर में फिट होने के लिए संपीड़न की आवश्यकता होती है।

उन सभी अपरिवर्तनीय तत्वों को फ्रीज़ करें जिनके आकार पहले से सेट किए जा सकते हैं। यदि हम फ्लेक्स-ग्रो का उपयोग करते हैं तो इसमें फ्लेक्स-ग्रो करने वाले सभी तत्व शामिल होंगे : 0 । यह वह परिदृश्य है जब हमारे पास फ्लेक्स आइटम कंटेनर में खाली जगह होते हैं। प्रारंभिक फ्लेक्स-ग्रो वैल्यू 0 है, इसलिए वे अपनी अधिकतम चौड़ाई के रूप में बड़े हो जाते हैं, और फिर वे अपने मुख्य आकार से नहीं बढ़ते हैं।

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

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

फ्लेक्स-हटना कारक तत्वों के आंतरिक आकार से गुणा किया जाता है, हमारे मामले में यह अधिकतम-सामग्री आकार है। यह स्थान कम करने के लिए मूल्य प्रदान करता है। यदि तत्व केवल फ्लेक्स-सिकुड़ते गुणांक के अनुसार अंतरिक्ष को हटाते हैं , तो छोटे तत्व गायब हो सकते हैं जब उनके सभी स्थान हटा दिए गए होंगे, जबकि बड़े तत्व में अभी भी संपीड़न के लिए स्थान होगा।

इस चक्र में, जाँच करने वाले तत्वों का एक अतिरिक्त चरण है जो उनके मुख्य आकार से बड़ा या छोटा हो जाएगा, जिस स्थिति में तत्व बढ़ना या सिकुड़ना बंद हो जाता है। फिर, यह इसलिए किया जाता है ताकि कुछ तत्व अन्य वस्तुओं की तुलना में छोटे या बड़े पैमाने पर न बनें।

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

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

विकास और संकुचन नियंत्रण

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

अपना स्वयं का फ्लेक्स-आधार सेट करके , या तत्व को स्वयं एक आकार देकर, जिसे तब फ्लेक्स-बेस के रूप में उपयोग किया जाता है, आप एल्गोरिथ्म का नियंत्रण लौटाते हैं, फ्लेक्सबॉक्स को बताते हुए कि आप उस विशिष्ट आकार से बढ़ना या सिकुड़ना चाहते हैं। आप फ्लेक्स-ग्रो या फ्लेक्स-हटने के पैरामीटर को 0. पर सेट करके विकास या संपीड़न को पूरी तरह से अक्षम कर सकते हैं। इस बिंदु पर, आपको फ्लेक्स आइटम को नियंत्रित करने की इच्छा का उपयोग अस्थायी रूप से यह देखने के लिए करना चाहिए कि क्या आप सही लेआउट विधि का उपयोग कर रहे हैं। यदि आप दो आयामों में फ्लेक्स आइटम संरेखित करने का प्रयास कर रहे हैं, तो आप बेहतर तरीके से ग्रिड लेआउट चुनेंगे।

संबंधित आकार डिबगिंग मुद्दे

यदि आपके फ्लेक्स तत्व अप्रत्याशित आकारों में समाप्त हो जाते हैं, तो यह आमतौर पर होता है क्योंकि आपके फ्लेक्स-बेस में ऑटो होता है , और कुछ ऐसा होता है जो इस तत्व को एक चौड़ाई देता है, जिसे बाद में फ्लेक्स-बेस के रूप में उपयोग किया जाता है। DevTools में किसी वस्तु की जाँच यह निर्धारित करने में मदद कर सकती है कि आकार कहाँ से आता है। आप फ्लेक्स-बेस को 0 पर सेट करने का भी प्रयास कर सकते हैं, जिससे फ्लेक्सबॉक्स आइटम को शून्य चौड़ाई के रूप में मानता है । यहां तक ​​कि अगर यह वह परिणाम नहीं है जो आप चाहते हैं, तो यह आपके आकार की समस्याओं के अपराधी के रूप में उपयोग करने के लिए फ्लेक्स-आधार के मूल्य को निर्धारित करने में मदद करेगा।

फ्लेक्स अंतराल

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

Ris_5। जैसा कि फ़ायरफ़ॉक्स 63 में इमेज दिखाई दे रही है

ग्रिड लेआउट के साथ, फ्लेक्स तत्वों के लिए स्थान आवंटित करने से पहले अंतराल की लंबाई को ध्यान में रखा जाता है।

समापन

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