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

टेलविंड फ्लेक्स में फ्लेक्स कंटेनर को समझना

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

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

फ्लेक्स बेसिस को समझना

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

निम्नलिखित उदाहरण पर विचार करें:

  
01
  
02
  
03

इस स्निपेट में, हमारे पास तीन चाइल्ड तत्वों वाला एक फ्लेक्स कंटेनर है। पहले दो आइटम (01 और 02) आधार-1/4 के साथ सेट किए गए हैं, जिसका अर्थ है कि उनमें से प्रत्येक शुरू में कंटेनर की चौड़ाई का एक चौथाई हिस्सा लेगा। तीसरे आइटम (03) का आधार-1/2 है, जिससे यह कंटेनर के आधे हिस्से पर कब्जा कर लेता है।

आधार-* उपयोगिताओं का उपयोग करके, आप आसानी से नियंत्रित कर सकते हैं कि कंटेनर के भीतर फ्लेक्स आइटम कैसे वितरित किए जाते हैं, जिससे आप ऐसे लेआउट बना सकते हैं जो लचीले और दृष्टिगत रूप से संतुलित दोनों हैं।

फ्लेक्स दिशा को समझना: पंक्ति और स्तंभ

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

पंक्ति

फ्लेक्स आइटम को क्षैतिज रूप से रखने के लिए, फ्लेक्स-पंक्ति उपयोगिता का उपयोग करें। यह आइटमों को बाएँ से दाएँ संरेखित करेगा, ठीक वैसे ही जैसे पाठ सामान्यतः पढ़ा जाता है:

  
01
  
02
  
03

पंक्ति उलटी

यदि आपको फ्लेक्स आइटम को क्षैतिज रूप से विपरीत दिशा में - दाएं से बाएं - फ्लेक्स-रो-रिवर्स का उपयोग करने की आवश्यकता है:

  
01
  
02
  
03

स्तंभ

फ्लेक्स आइटम को लंबवत रूप से रखने के लिए, फ्लेक्स-कॉल उपयोगिता का उपयोग करें। इससे आइटम ऊपर से नीचे तक ढेर हो जाते हैं:

  
01
  
02
  
03

कॉलम उलटा

यदि आपको वस्तुओं को विपरीत दिशा में - नीचे से ऊपर तक - लंबवत रूप से ढेर करने की आवश्यकता है, तो फ्लेक्स-कॉल-रिवर्स का उपयोग करें:

  
01
  
02
  
03

फ्लेक्स रैप को समझना

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

लपेटो मत

फ्लेक्स आइटम को लपेटने से रोकने के लिए, फ्लेक्स-नॉरैप उपयोगिता का उपयोग करें। यह सभी वस्तुओं को एक ही पंक्ति में रहने के लिए बाध्य करता है, भले ही इसके कारण कुछ वस्तुएँ कंटेनर से बाहर बह जाती हों:

  
01
  
02
  
03

सामान्य रूप से लपेटें

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

  
01
  
02
  
03

उलटा लपेटें

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

  
01
  
02
  
03

फ्लेक्स ग्रोथ और श्रिंक को समझना

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

प्रारंभिक

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

  
01
  
02
  
03

इस उदाहरण में, जरूरत पड़ने पर आइटम 02 और 03 सिकुड़ सकते हैं, लेकिन वे अपने शुरुआती आकार से आगे नहीं बढ़ेंगे।

फ्लेक्स 1

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

  
01
  
02
  
03

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

ऑटो

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

  
01
  
02
  
03

इस सेटअप में, आइटम 02 और 03 अपनी प्रारंभिक चौड़ाई पर ध्यान केंद्रित रखते हुए उपलब्ध स्थान में फिट होने के लिए बढ़ते या सिकुड़ते हैं।

कोई नहीं

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

  
01
  
02
  
03

यहां, आइटम 01 और 02 बिना बढ़े या सिकुड़े अपना आकार बनाए रखते हैं, जबकि आइटम 03 उपलब्ध स्थान को भरने के लिए समायोजित होता है।

फ्लेक्स ग्रो

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

बढ़ना

किसी फ्लेक्स आइटम को बढ़ने और किसी भी उपलब्ध स्थान को भरने की अनुमति देने के लिए, ग्रो यूटिलिटी का उपयोग करें:

  
01
  
02
  
03

इस उदाहरण में, आइटम 02 आइटम 01 और 03 के बीच किसी भी उपलब्ध स्थान को लेने के लिए बढ़ता है, जिसका आकार निश्चित होता है।

मत बढ़ो

किसी फ्लेक्स आइटम को बढ़ने से रोकने के लिए, ग्रो-0 उपयोगिता का उपयोग करें:

  
01
  
02
  
03

यहाँ, आइटम 02 बढ़ता नहीं है और अपना प्रारंभिक आकार बनाए रखता है, जबकि आइटम 01 और 03 शेष स्थान को भरने के लिए बढ़ते हैं।

फ्लेक्स सिकुड़न

फ्लेक्स श्रिंक यूटिलिटीज आपको यह नियंत्रित करने की अनुमति देती है कि अपर्याप्त जगह होने पर फ्लेक्स आइटम सिकुड़ते हैं या नहीं।

सिकुड़ना

किसी फ्लेक्स आइटम को आवश्यकतानुसार सिकुड़ने की अनुमति देने के लिए, सिकुड़न उपयोगिता का उपयोग करें:

  
01
  
02
  
03

यहाँ, आइटम 02 सिकुड़ता नहीं है और अपनी चौड़ाई बरकरार रखता है, जबकि आइटम 01 और 03 आवश्यकतानुसार सिकुड़ या विस्तारित हो सकते हैं।

निष्कर्ष

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