सीएसएस फ़्लैट्स एक एस्केलेटर की सवारी द्वारा समझाया गया

यदि आपने कभी एस्केलेटर पर छलांग लगाई है, तो आप झट से समझ सकते हैं।

आपका

लगभग सही है। आप कुछ तत्वों के बीच संबंध को ठीक करने के लिए कुछ फ़्लोट्स को पेश करने का निर्णय लेते हैं।

अगली चीज़ जो आप जानते हैं, आपके नए फ़्लोट किए गए तत्व आपके ध्यान से चुने गए क्रम से बाहर कूदते हैं, और चुंबक की तरह आपके div के किनारे पर चिपक जाते हैं। वाक्यांश "अनपेक्षित व्यवहार" मन में आता है।

मैं पूरी तरह से तैरता हुआ समझने की कोशिश कर रहा हूँ। मैंने एक लेख पढ़ा है और कहा है, "ओह, यह समझ में आता है!" फिर मैं अपने कोड पर लौटता हूं, इसे आज़माता हूं और विफल रहता हूं। ड्रॉइंग बोर्ड पर वापस।

मैं आपको इस भाग्य से अलग करने की पूरी कोशिश कर रहा हूं।

फ़्लोट्स वैकल्पिक प्रवाह बनाते हैं। यह समझने का सबसे कठिन हिस्सा है। और एक बार जब आप उन्हें परिचय देते हैं, तो आपको अपना कोड लिखने की आवश्यकता होती है ताकि यह तीन प्रवाह तक हो सके: सामान्य, बाएँ और दाएँ। यह नियमों का एक नया सेट है, जैसा कि तत्वों की चौड़ाई में हेरफेर या उनकी स्थिति के विपरीत है।

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

पास लेन का सम्मान करेंगे

तत्वों का डिफ़ॉल्ट प्रवाह ऊपर चित्र की तरह है। कोई आदमी रेलिंग पर हाथ रखकर बीच में खड़ा है। वह पूरे एस्केलेटर को हिला रहा है। उसे कोई भी पास नहीं कर सकता। बहुत गरीब एस्केलेटर शिष्टाचार, वास्तव में।

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

यह वह स्थिति है जब आप फ्लोट्स का उपयोग नहीं कर रहे हैं।

ठीक है, अब हम बात कर रहे हैं! कुछ स्तर की जागरूकता दिखाते लोग। जिसे देखकर प्यार हुआ।

हमारे पास बाईं ओर एक लेन बनी है, और दाईं ओर एक और लेन है। अन्य लोग आसानी से दो लोगों के चारों ओर घूम सकते हैं जो अभी भी खड़े हैं और यदि वे चाहते हैं तो एस्केलेटर को और अधिक तेज़ी से चला सकते हैं। कोई भी बीच में खड़े होकर प्रवाह को रोक नहीं रहा है।

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

फ्लोट्स: लेफ्ट और राइट

फ्लोट्स के उपयोग से दो नए प्रवाह शुरू हो सकते हैं: बाएं और दाएं।

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

फ्लोट्स आपको प्रवाह के बीच इन नए संबंधों को बनाने की अनुमति देते हैं।

यदि आपके पास लिफ्ट के बीच में खड़े लोगों की एक पंक्ति है, तो आपके पास नई संरचनाओं के लिए सीमित विकल्प होंगे। लेकिन जब आपके पास एक बाएँ और दाएँ स्तंभ होते हैं, तो अचानक आप यह निर्दिष्ट कर सकते हैं कि कुछ लोग दाईं ओर खड़े हैं, अन्य लोग बाएं बने हुए हैं, और दूसरा समूह अंतराल में भर सकता है।

यह आपको अधिक पठनीय और समझने योग्य कोड बनाने की अनुमति देता है, क्योंकि फ्लोट संपत्ति आसपास के तत्वों के लिए एक तत्व के संबंध का संकेत भी देती है।

स्पष्ट संपत्ति

एक और शिकन है जिस पर हमने अभी तक चर्चा नहीं की है: स्पष्ट संपत्ति। "स्पष्ट" तत्वों को यह निर्दिष्ट करने की अनुमति देता है कि उन्हें फ्लोट किए गए तत्वों की तुलना में कहां संरेखित करना चाहिए।

"फ़्लोट्स" अनुभाग की पहली तस्वीर में, दो एस्केलेटर सवार एस्केलेटर के प्रत्येक तरफ खड़े थे। यह दूसरों को उन्हें पास करने और इच्छानुसार स्वतंत्र रूप से स्थानांतरित करने की अनुमति देता है।

बता दें कि एक फ्लोटेड लेफ्ट एलिमेंट और एक फ्लोटेड राइट एलिमेंट होने के बजाय, हमने 3 फ्लोटेड लेफ्ट एलिमेंट्स और 1 को राइट पर रखा था। यदि हम उन्हें "स्पष्ट: वाम" संपत्ति भी देते हैं, तो तीन फ्लोट किए गए बाएं तत्व बाईं ओर एक पंक्ति में ढेर हो जाएंगे। लेकिन अगर वे तैरते हुए सही तत्व के साथ क्षैतिज रूप से गठबंधन करते हैं, तो यह पारित करने के लिए तत्वों के सामान्य प्रवाह के लिए बहुत मुश्किल या असंभव हो सकता है:

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

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

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

वह तीन-प्रवाह प्रणाली से बच गया है और नियमों को रीसेट कर रहा है। एस्केलेटर चलाने के इच्छुक लोगों के लिए बुरा है? ज़रूर। लेकिन यह अच्छा है अगर आप किसी को भी पास होने से रोकना चाहते हैं।

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

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

और अगर आपको लगता है कि यह अन्य लोगों को आपकी तरह एक ही स्थिति में मदद कर सकता है, तो इसे "दिल" दें!

यह पोस्ट मूल रूप से CodeAnalogies ब्लॉग पर दिखाई दी।