🦇 🦑 👩🏽‍💼 मीडिया अनुरोधों के बिना फ्लेक्सबॉक्स पर तत्वों का नॉनट्रिवियल लेआउट 🕝 🗑️ 🎥

ऐसा लगता है, 2019 में सीएसएस फ्लेक्सबॉक्स के बारे में क्या पोस्ट हो सकती है? लेआउट डिजाइनर कई वर्षों से सक्रिय रूप से इस तकनीक का उपयोग कर रहे हैं, और सभी रहस्यों को अप्रकाशित होना चाहिए।

हालांकि, हाल ही में मुझे एक मजबूत एहसास हुआ कि मुझे एक गैर-तुच्छ और साझा करने की आवश्यकता है, मेरी राय में, फ्लेक्सबॉक्स से संबंधित उपयोगी चाल। एक पोस्ट को इस तथ्य से प्रेरित किया गया था कि फ्लेक्सबॉक्स से जुड़ी समस्या को हल करने के लिए एक भी परिचित (छात्रों, टाइपसेटर्स और सिर्फ वेब के करीब लोगों से) सक्षम नहीं था, हालांकि इसमें केवल 4-6 लाइनें लगती हैं।

तो, पहले समस्या का बयान, फिर पृष्ठभूमि और अंत में, समाधान।

समस्या का बयान

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

ऐसा लगता है, क्या तय करना है? लेकिन एक और शर्त है: आपको इसे मीडिया मोड्स के बिना - स्वत: मोड में पुनर्निर्माण करने की आवश्यकता है।

क्यों, आप पूछें? मीडिया के सवालों पर प्रतिबंध के साथ ये तरकीबें, फ्लेक्सबॉक्स के लिए फ्लेक्सबॉक्स क्यों?

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

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

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

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

अक्सर ऐसी समस्याओं को हल करते समय, लोग तनाव नहीं करते हैं। या तो वे अग्रिम में एक मीडिया अनुरोध करते हैं, प्रभाव के बिंदु पर एक बड़े अंतर के साथ, या दो में से केवल एक तत्व को केंद्र में रखने के लिए सामग्री है।

विधि 1 बस असुविधाजनक है, शीर्षकों और तिथियों के साथ विधि 2 उदाहरण के लिए कम या ज्यादा सामान्य दिखेगी, लेकिन यह सिर्फ लोगो और मेनू के लिए भयानक होगा।

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

प्रागितिहास

मैं कुछ साल पहले फ्लेक्सबॉक्स से मिलते ही तत्वों के इस व्यवहार को प्राप्त करना चाहता था। हालांकि, प्रयोगों और पढ़ने के मैनुअल ने परिणाम नहीं दिए। नतीजतन, यह निष्कर्ष निकाला गया कि कूदने पर केवल एक तत्व केंद्रित होने में सक्षम होगा, और दूसरा किनारे पर रहेगा।

हमेशा सही व्यवहार हासिल करने के लिए कुछ याद नहीं था। फ्लेक्स-बढ़ने से एक स्क्रीन पर मदद मिलेगी, दूसरे पर नुकसान। मार्जिन: ऑटो और टेक्स्ट-संरेखित मदद, लेकिन वे परिणाम प्राप्त करने के लिए पर्याप्त नहीं हैं।

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

प्रेरणा 2019 की गर्मियों में आई थी, जब, लेआउट पाठ्यक्रम पर होमवर्क का विश्लेषण करते हुए, मैंने देखा कि फ्लेक्स-ग्रो को बिना किसी साधन के लागू किया गया था : 0.5 । उस उदाहरण में, 0.5 के लालच ने समस्या को हल करने में बहुत मदद नहीं की, हालांकि, मुझे तुरंत लगा कि वह गुप्त घटक था जिसमें हमेशा कमी थी। ऐसा नहीं है कि मुझे नहीं पता था कि विकास आंशिक हो सकता है। यह मेरे लिए नहीं था कि 0.5 एक आदर्श व्यवस्था को प्राप्त करने में मदद कर सकता है! अब यह स्पष्ट लगता है, क्योंकि फ्लेक्स-ग्रो: 0.5 मुक्त स्थान के ठीक आधे पर कब्जा है ...

सामान्य तौर पर, जब मैंने फ्लेक्स-ग्रो: 0.5 देखा, तो 10 मिनट में मैंने तत्वों को व्यवस्थित करने के कार्य को पूरी तरह से हल कर दिया, जिसे 2014 के बाद से अयोग्य माना गया था। यह देखते हुए कि कोड बहुत सरल और संक्षिप्त था, मैंने फैसला किया कि मैंने एक लंबे समय से ज्ञात साइकिल का आविष्कार किया था। लेकिन फिर भी, कुछ दिनों पहले मैंने यह जांचने का फैसला किया कि वह लेआउट डिजाइनरों के लिए कितना जाना जाता है और 45 हजार ग्राहकों के साथ मेरे यूट्यूब चैनल पर एक इंटरैक्टिव वेब डेवलपमेंट प्रोग्राम लॉन्च किया है।

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

नीचे हम जिस समाधान पर चर्चा करेंगे, वह काफी सार्वभौमिक है। कभी-कभी पाठ को केंद्र में रखने या पृष्ठभूमि को सही ढंग से प्रदर्शित करने के लिए एक अतिरिक्त आवरण के निर्माण की आवश्यकता होती है। लेकिन अक्सर संरचना को बदलने के बिना सीएसएस कोड की सिर्फ 6 लाइनों के साथ प्राप्त करना संभव है।

मूल समाधान

आइए आधार के रूप में HTML का एक छोटा टुकड़ा लें। यह एक उदाहरण है जो हमने पहले gif चित्र में देखा था। दिनांक और शीर्षक किनारों पर दबाए जाते हैं, और जब कूदते हैं, तो उन्हें केंद्रित होना चाहिए।

<div class="blog"> <div class="blogItem"> <div class="blogItem__cat">Article posted in: PHP Programming</div> <div class="blogItem__dt">21.10.2019</div> </div> <div class="blogItem"> <div class="blogItem__cat">Article posted in: Javascript</div> <div class="blogItem__dt">22.10.2019</div> </div> <div class="blogItem"> <div class="blogItem__cat">Article posted in: wft my programm don't work</div> <div class="blogItem__dt">23.10.2019</div> </div> </div>

हम पृष्ठभूमि, फ्रेम, आदि से जुड़े निर्बाध शैलियों को छोड़ देते हैं। CSS का मुख्य भाग :

 .blogItem { display: flex; flex-wrap: wrap; } .blogItem__cat { flex-grow: 0.5; margin-left: auto; } .blogItem__dt { flex-grow: 0.5; text-align: right; }

जब आप पहली बार इस कोड को देखते हैं, तो आपको यह महसूस हो सकता है कि यह किसी व्यक्ति द्वारा नहीं लिखा गया है, लेकिन एक यादृच्छिक सीएसएस-गुण यादृच्छिक जनरेटर द्वारा किया गया है! इसलिए, हमें यह समझने की ज़रूरत है कि यह कैसे काम करता है!

मेरा सुझाव है कि आप पहले चित्र का ध्यानपूर्वक अध्ययन करें , और उसके बाद ही नीचे स्थित पाठ विवरण पर आगे बढ़ें।

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

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

लेकिन इससे भी बड़े चमत्कार तब शुरू होते हैं, जब तत्व अलग-अलग लाइनों में कूद जाते हैं। मार्जिन-बाएं ऑटो बाएं किनारे से जहां तक संभव हो, पहले तत्व को धक्का देता है। चलो, चलो, हम वहाँ कितनी जगह छोड़ गए हैं? 100% माइनस एलिमेंट साइज़ माइनस हाफ फ्री ग्रो = हाफ फ्री ! यहाँ संरेखण है!

दूसरा तत्व बाएं किनारे पर है और इसके आधार आकार के बराबर एक स्थान रखता है, साथ ही आधा मुफ़्त है। यह विश्वास करना कठिन है, लेकिन पाठ-संरेखित: सही तत्व पूरी तरह से केंद्रित होगा!

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

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

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

बेहतर समाधान

यूट्यूब पर इंटरेक्टिव पर टिप्पणियों में, उन्होंने जल्दी से ध्यान दिया कि पाठ को सही ढंग से केवल तब तक तैनात किया जाता है जब तक कि शीर्षक को एक स्क्रीन पर एक पंक्ति में नहीं रखा जाता है। नई लाइनों पर, पाठ बाईं ओर धकेल दिया जाता है।

यदि शीर्षक मूल रूप से दूसरा तत्व था (तिथि के दाईं ओर स्थित), तो पाठ-संरेखित करें: सही उस पर कार्य करेगा, जिसके कारण पाठ भी अजनबी दिखाई देगा। वैसे, हम फ्लेक्स-ग्रो 0.5 के कारण पृष्ठभूमि और तारीख निर्धारित नहीं कर सकते हैं।

हालांकि, यह सब आसानी से गुणों के साथ एक बच्चा पैदा करके हल किया जाता है

 some-selector { display: inline-block; text-align: center }

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

यह महत्वपूर्ण है कि हम इस आंतरिक पाठ-संरेखण के कार्य को तब तक महसूस नहीं करेंगे जब तक कि फ्लेक्स-एलिमेंट में केवल एक पंक्ति न हो।

वैसे, इनलाइन-फ्लेक्स भी ठीक है!

कोड उदाहरण

सही संरेखण
सामान्य पृष्ठभूमि (सिर्फ उदाहरण के लिए, पृष्ठभूमि शीर्षक के लिए बहुत-सी दिखती है)

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

अतिरिक्त विचार

इंडेंट

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

specular

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

निष्कर्ष

यह तकनीक एक विशेष समस्या का सिर्फ एक दिलचस्प समाधान है। बेशक, मीडिया के अनुरोधों को अस्वीकार न करें और मीडिया के बिना फ्लेक्सबॉक्स में विश्वास करें। लेकिन मेरे उदाहरण में, मेरे विचार में, यह समाधान बहुत दिलचस्प लगता है।

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

मुझे उम्मीद है कि फ्लेक्स-तत्वों के साथ काम करने की विचारशील योजना उपयोगी होगी और कुछ समस्याओं को हल करते समय लेआउट डिजाइनरों के लिए जीवन को आसान बनाएगी!

मीडिया अनुरोधों के बिना फ्लेक्सबॉक्स पर तत्वों का नॉनट्रिवियल लेआउट