The incredible power of flexbox

Sep 11, 2025
कैसे करना है

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

फ्लेक्सबॉक्स मूल बातें

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

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

फ्लेक्सबॉक्स का उपयोग कैसे करें

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

हमारे बच्चे के divs के साथ, हम पैरेंट कंटेनर की प्रदर्शन संपत्ति को सेट कर सकते हैं फ्लेक्स । 

 फ्लेक्स कंटेनर {
प्रदर्शन: फ्लेक्स;
}

लेआउट निर्देश

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

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

फ्लेक्स कंटेनर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: कॉलम;
}

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

फ्लेक्सबॉक्स आपको लेआउट को उलट देता है। जब उलट दिया जाता है, एक फ्लेक्स कंटेनर के बच्चों को दाएं से बाएं स्थान पर रखा जाएगा (यदि दिशा है पंक्ति ) या नीचे-से-ऊपर (यदि दिशा है स्तंभ )। 

 फ्लेक्स कंटेनर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति-रिवर्स;
}

फ्लेक्स कंटेनर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: कॉलम-रिवर्स;
}

यदि आप छोटी स्क्रीन पर लेआउट को उलटना चाहते हैं तो यह आसान हो सकता है।

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

संरेखण समायोजित करें

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

फ्लेक्स-स्टार्ट : पंक्ति की शुरुआत की ओर सेट आइटम (बाएं, जब तक आप लेआउट को उलट नहीं कर लेते)

केन्द्र : पंक्ति के भीतर केंद्रित आइटम

फ्लेक्स-एंड : पंक्ति के अंत की ओर सेट आइटम (दाएं, जब तक आप लेआउट को उलट नहीं कर लेते)

अंतरिक्ष के बीच : आइटम समान रूप से पंक्ति के साथ वितरित किया जाता है

अंतरिक्ष के आसपास : प्रत्येक तत्व के दोनों ओर समान स्थान के साथ, पंक्ति के साथ समान रूप से वितरित आइटम

तो कोड इस तरह दिख सकता है: 

 फ्लेक्स कंटेनर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
संरेखित सामग्री: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | अंतरिक्ष के बीच | अंतरिक्ष के आसपास | खिंचाव;
}

फ्लेक्स कंटेनर में आइटम के लिए आपके वर्टिकल संरेखण विकल्प यहां दिए गए हैं:

फ्लेक्स-स्टार्ट : पंक्ति के शीर्ष पर गठबंधन आइटम

केन्द्र : आइटम पंक्ति के भीतर केंद्रित हैं

फ्लेक्स-एंड : पंक्ति के नीचे तक गठबंधन आइटम

खिंचाव : पंक्ति की ऊंचाई में खिंचाव आइटम

आधारभूत : आइटम उनकी बेसलाइनों के लिए गठबंधन (काल्पनिक रेखा जो पाठ पर बैठती है)

कोड इस तरह दिख सकता है: 

 फ्लेक्स कंटेनर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
संरेखित आइटम: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | बेसलाइन | खिंचाव;
}

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

 फ्लेक्स कंटेनर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-लपेटें: लपेटें;
}

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

फ्लेक्स आकार

फ्लेक्स बच्चे उपलब्ध स्थान को भरने के लिए अपनी चौड़ाई या ऊंचाई (कंटेनर की लेआउट दिशा के आधार पर) को बदल सकते हैं।

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

 फ्लेक्स आइटम {
फ्लेक्स-सिकुड़: & lt; संख्या & gt ;;
फ्लेक्स-ग्रोथ: & lt; संख्या & gt ;;
फ्लेक्स आधार: & lt; लंबाई & gt; | ऑटो;
}

आइए देखें कि इनमें से प्रत्येक विकल्प क्या करता है:

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

फ्लेक्स आइटम में अपनी संरेखण सेटिंग्स भी हो सकती हैं, जो अपने मूल फ्लेक्स कंटेनर द्वारा निर्धारित डिफ़ॉल्ट संरेखण को ओवरराइड करती हैं। ये संरेखण पहले समझाया गया है। 

 फ्लेक्स आइटम {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
संरेखित आइटम: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | बेसलाइन | खिंचाव;
}

डिफ़ॉल्ट रूप से, फ्लेक्स आइटम एक ही क्रम में प्रदर्शित होते हैं क्योंकि वे स्रोत कोड में दिखाई देते हैं। फ्लेक्सबॉक्स के साथ, आप इस व्यवहार को ओवरराइड कर सकते हैं ताकि तत्वों को आपके इच्छित क्रम में प्रदर्शित करें।

चार मुख्य विकल्प हैं जिनका आप यहां उपयोग कर सकते हैं:

  • ऑटो : डिफ़ॉल्ट मान, जो आइटम के रूप में वे स्रोत में हैं
  • प्रथम : आइटम पहले अपने फ्लेक्स कंटेनर में दिखाई देता है
  • पिछले : आइटम अपने फ्लेक्स कंटेनर में रहता है
  • रिवाज : आप उस ऑर्डर को कस्टमाइज़ कर सकते हैं जिसमें आपका आइटम प्रदर्शित किया जाएगा

कस्टम ऑर्डर को एक संख्या के रूप में परिभाषित किया जा सकता है, जो उस क्रम को निर्दिष्ट करता है जिसमें फ्लेक्स आइटम फ्लेक्स कंटेनर के अंदर दिखाई देता है। 

 फ्लेक्स आइटम {
आदेश: & lt; पूर्णांक & gt ;;
}

मुझे क्यों इसका उपयोग करना चाहिए?

मुझे खुशी है कि आपने पूछा! फ्लेक्सबॉक्स का उपयोग करने से आप आसानी से उत्तरदायी लेआउट बनाने की अनुमति देता है जो पुराने सीएसएस लेआउट मॉड्यूल के साथ एक बार बहुत मुश्किल (या असंभव) थे।

नीचे दी गई छवि में उदाहरणों पर नज़र डालें - जिनमें से कई आप पहले ही वेब पर पहले ही देख चुके हैं। उनमें से लगभग एक बड़ी मात्रा में सीएसएस (विशेष रूप से विभिन्न स्क्रीन आकारों में) ले जाएगा, लेकिन केवल फ्लेक्सबॉक्स के साथ प्राप्त करने के लिए कुछ सरल रेखाएं लें। कार्रवाई में इन उदाहरणों को देखने के लिए, यात्रा flexbox.webflow.com ।

कैसे करना है - सर्वाधिक लोकप्रिय लेख

फ़ोटोशॉप में फोंट कैसे जोड़ें

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: एडोब) [1 9] फ़ोटोशॉप में फ़ॉन्ट�..

किसी तस्वीर में किसी को फोटोशॉप कैसे करें

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: भविष्य, मैट स्मिथ) [1 9] किसी चित्�..

How to create accessible web forms

कैसे करना है Sep 11, 2025

फॉर्म वेब का एक आवश्यक घटक हैं क्योंकि वे उपयोगकर..

How to hide your JavaScript code from View Source

कैसे करना है Sep 11, 2025

यदि आप अपने जावास्क्रिप्ट कोड के साथ सावधानी बरत�..

Create a responsive layout with CSS Grid

कैसे करना है Sep 11, 2025

सीएसएस ग्रिड लेआउट हर दिन ब्राउज़र समर्थन म�..

Make interactive 3D typography effects

कैसे करना है Sep 11, 2025

टाइपोग्राफी ने हमेशा किसी भी डिजाइनर के टूल्स के ..

Modelling complex geometry: 5 top tips

कैसे करना है Sep 11, 2025

मेरे अनुभव के वर्षों में, वीडियो गेम स्टूडियो सेट..

How to master 3D fan art

कैसे करना है Sep 11, 2025

टीवी श्रृंखला डेयरडेविल के पहले सत्र को देखने के ..

श्रेणियाँ