अपनी वेबसाइट को अधिक प्रतिक्रियाशील बनाने के लिए फ्लेक्स का उपयोग कैसे करें

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

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

CSS फ्लेक्स डिस्प्ले कैसे सेट करें

यदि आप अपरिचित हैं फ्लेक्सबॉक्स की मूल बातें, आप इसे एक्सप्लोर कर सकते हैं कोडपेन स्निपेट. इसमें एक साधारण फ्लेक्सबॉक्स सेटअप के लिए उदाहरण कोड शामिल है। सबसे पहले, आपको चाइल्ड आइटम को पैरेंट डिव या "फ्लेक्स कंटेनर" के तहत लपेटना होगा।

<डिव क्लास ="माता-पिता">
<डिव क्लास ="बाल-वस्तु"></div>
<डिव क्लास ="बाल-वस्तु"></div>
<डिव क्लास ="बाल-वस्तु"></div>
</div>

जोड़ें प्रदर्शन: फ्लेक्स माता-पिता div को संपत्ति।

.माता-पिता {
 प्रदर्शन: फ्लेक्स;
}

कंटेनर के भीतर आइटम कैसे उगाएं

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

फ्लेक्स-ग्रो जोड़ने के लिए, प्रत्येक चाइल्ड आइटम में फ्लेक्स-ग्रो सीएसएस प्रॉपर्टी जोड़ें।

<डिव क्लास ="माता-पिता">
<डिव स्टाइल ="पृष्ठभूमि-रंग: लाल; फ्लेक्स-ग्रो: 1"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: नारंगी; फ्लेक्स-ग्रो: 1"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: पीला; फ्लेक्स-ग्रो: 1"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: हरा; फ्लेक्स-ग्रो: 3"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: नीला; फ्लेक्स-ग्रो: 1"></div>
</div>

.माता-पिता {
 चौड़ाई: 500 पीएक्स;
 प्रदर्शन: फ्लेक्स; 
}

प्रत्येक आइटम के लिए 0 के फ्लेक्स-ग्रो का मतलब है कि बक्से अपने माता-पिता के स्थान को भरने के लिए विस्तारित नहीं होंगे। 0 इस संपत्ति के लिए डिफ़ॉल्ट मान है।

प्रत्येक आइटम के लिए 1 का फ्लेक्स-ग्रो माता-पिता के अंदर उपलब्ध स्थान को फिट करने के लिए सभी बक्से को समान रूप से विस्तारित करने के लिए मजबूर करेगा।

उदाहरण के लिए, यदि किसी एक आइटम में बड़ा फ्लेक्स ग्रो होता है:

<डिव स्टाइल ="पृष्ठभूमि-रंग: हरा; फ्लेक्स-ग्रो: 3"></div>

हरा बॉक्स अन्य बक्सों की तुलना में तीन गुना अधिक स्थान प्राप्त करने का प्रयास करेगा।

इसमें फ्लेक्स-ग्रो प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट एक कामकाजी उदाहरण देखने के लिए।

कैसे एक कंटेनर के भीतर आइटम सिकोड़ें

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

फ्लेक्स-हटना आपको एक अनुपात निर्दिष्ट करने की अनुमति देता है कि प्रत्येक आइटम को कितना सिकुड़ना चाहिए।

चाइल्ड डिव आइटम में फ्लेक्स-हटना गुण जोड़ें। माता-पिता और बच्चों की चौड़ाई बदलें ताकि आइटम कंटेनर में फिट न हों।

<डिव क्लास ="माता-पिता">
<डिव स्टाइल ="पृष्ठभूमि-रंग: लाल; फ्लेक्स-हटना: 1"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: नारंगी; फ्लेक्स-हटना: 1"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: पीला; फ्लेक्स-हटना: 1"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: हरा; फ्लेक्स-हटना: 2"></div>
<डिव स्टाइल ="पृष्ठभूमि-रंग: नीला; फ्लेक्स-हटना: 1"></div>
</div>

.माता-पिता {
 चौड़ाई: 500 पीएक्स;
 प्रदर्शन: फ्लेक्स; 
}
.माता-पिता डिव {
 चौड़ाई: 150 पीएक्स;
 ऊंचाई: 150 पीएक्स;
}

सभी मदों के लिए 1 के फ्लेक्स-सिकुड़न का अर्थ है कि माता-पिता की चौड़ाई कम होने पर सभी आइटम समान रूप से सिकुड़ जाएंगे।

यदि किसी एक आइटम में बड़ा फ्लेक्स-सिकुड़न था, उदाहरण के लिए:

<डिव स्टाइल ="पृष्ठभूमि-रंग: हरा; फ्लेक्स-हटना: 2"></div>

हरा बॉक्स अन्य बक्सों की तुलना में दोगुना सिकुड़ने का प्रयास करेगा।

इसमें फ्लेक्स-हटना गुण के लिए कोड देखें कोडपेन स्निपेट एक कामकाजी उदाहरण देखने के लिए।

आइटम को अगली पंक्ति में कैसे पुश करें

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

फ्लेक्स-रैप संपत्ति के विकल्पों में शामिल हैं:

फ्लेक्स-रैप: अब्रैप | लपेटो | रैप-रिवर्स

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

<डिव क्लास ="माता-पिता">
<डिव क्लास ="लाल"></div>
<डिव क्लास ="संतरा"></div>
<डिव क्लास ="पीला"></div>
<डिव क्लास ="हरा"></div>
<डिव क्लास ="नीला"></div>
</div>

.माता-पिता {
 चौड़ाई: 300 पीएक्स;
 सीमा: 1px ठोस काला;
 प्रदर्शन: फ्लेक्स;
 फ्लेक्स-रैप: रैप;
}
.माता-पिता डिव {
 चौड़ाई: 100 पीएक्स;
 ऊंचाई: 100 पीएक्स;
}

रैप वैल्यू कंटेनर के टॉप-राइट में शुरू होने वाले आइटम्स की स्थिति बनाएगी। रैप-रिवर्स वैल्यू कंटेनर के नीचे-दाईं ओर शुरू करने के लिए आइटम्स का स्थान बदल देगा। वस्तुओं को लपेटते समय, यह वस्तुओं को नीचे की बजाय ऊपर एक नई पंक्ति पर धकेल देगा।

यदि आप पैरेंट कंटेनर पर ऊंचाई निर्दिष्ट करते हैं, तो कंटेनर आइटम की पंक्तियों के बीच रिक्ति जोड़ देगा।

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

.माता-पिता { 
 चौड़ाई: 300 पीएक्स; 
 ऊंचाई: 300 पीएक्स;
 सीमा: 1px ठोस काला; 
 प्रदर्शन: फ्लेक्स;
 फ्लेक्स-रैप: रैप; 
 संरेखित-सामग्री: फ्लेक्स-प्रारंभ;
}

संरेखण-सामग्री गुण कई कोर में से एक है फ्लेक्सबॉक्स गुण जो आपको संरेखण को नियंत्रित करने की अनुमति देते हैं.

इसमें फ्लेक्स-रैप प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।

आइटम को अगले कॉलम में कैसे पुश करें

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

उदाहरण विकल्प संयोजन जिनका उपयोग आप flex-flow प्रॉपर्टी के लिए कर सकते हैं, उनमें शामिल हैं:

फ्लेक्स-रैप: रो अब्रैप | कॉलम अब्रैप | पंक्ति लपेटो | कॉलम रैप | रो रैप-रिवर्स | कॉलम रैप-रिवर्स

यह प्रॉपर्टी ऊपर दी गई फ्लेक्स-रैप प्रॉपर्टी की तरह ही काम करती है। पैरेंट फ्लेक्स कंटेनर में फ्लेक्स-फ्लो जोड़ें। सुनिश्चित करें कि पैरेंट कंटेनर की चौड़ाई चाइल्ड आइटम को लपेटने के लिए बाध्य करने के लिए पर्याप्त छोटी है:

.माता-पिता {
 चौड़ाई: 300 पीएक्स; 
 सीमा: 1px ठोस काला; 
 प्रदर्शन: फ्लेक्स; 
 फ्लेक्स-फ्लो: कॉलम रैप;
}
.माता-पिता डिव {
 चौड़ाई: 100 पीएक्स;
 ऊंचाई: 100 पीएक्स;
}

आइटम निर्दिष्ट दिशा (पंक्ति या स्तंभ) में लपेटे जाएंगे।

इसमें फ्लेक्स-फ्लो प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।

वस्तुओं का क्रम कैसे बदलें

यदि आपको किसी भी प्रकार के गतिशील डेटा के कारण पृष्ठ पर आइटम को फिर से व्यवस्थित करने की आवश्यकता है, तो आप इसका उपयोग कर सकते हैं गण फ्लेक्स संपत्ति। यह गुण आपको प्रत्येक आइटम के प्रकट होने के क्रम को निर्दिष्ट करने की अनुमति देता है।

जरूरी नहीं कि नंबर 1 से शुरू हों। आप किसी भी संख्या और अंतराल का उपयोग कर सकते हैं, और आदेश गुण HTML तत्वों को निम्नतम से उच्चतम तक क्रमित करेगा।

पैरेंट फ्लेक्स कंटेनर के अंदर प्रत्येक आइटम में ऑर्डर प्रॉपर्टी जोड़ें:

<डिव क्लास ="माता-पिता">
<डिव क्लास ="लाल" शैली ="आदेश: 2"></div>
<डिव क्लास ="संतरा" शैली ="आदेश: 1"></div>
<डिव क्लास ="पीला" शैली ="आदेश: 5"></div>
<डिव क्लास ="हरा" शैली ="आदेश: 4"></div>
<डिव क्लास ="नीला" शैली ="आदेश: 3"></div>
</div>

इस मामले में, नारंगी बॉक्स सबसे दाईं ओर होगा, उसके बाद लाल, नीला, हरा, फिर पीला बॉक्स होगा।

इसमें ऑर्डर प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।

अपनी वेबसाइट में अधिक CSS गुणों के साथ प्रयोग करना

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

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

HTML तत्वों को संरेखित करने के लिए फ्लेक्स का उपयोग कैसे करें

आगे पढ़िए

लेखक के बारे में