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

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

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

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

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

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

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

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

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

फ्लेक्स: आकार देने वाली वस्तुएं
फ्लेक्स प्रॉपर्टी एक दूसरे के सापेक्ष फ्लेक्स आइटम के आकार को नियंत्रित करती है। अधिकांश बक्सों में flex: 1 लगाने से, वे समान स्थान घेरते हैं, जबकि एक बक्से के लिए flex: 2 लगाने से वह अन्य बक्सों की तुलना में दोगुनी जगह घेरता है।

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

फ्लेक्स-रैप और फ्लेक्स-डायरेक्शन का संयोजन
अंत में, हमने एक लेआउट बनाने के लिए flex-wrap: रैप को flex-direction: column के साथ जोड़ा, जहां आइटम लंबवत रूप से ढेर हो जाते हैं और आवश्यकतानुसार नई लाइनों पर लपेटे जाते हैं। यह सेटअप जटिल लेआउट को कुशलतापूर्वक संभालने के लिए फ्लेक्सबॉक्स की क्षमता को प्रदर्शित करता है।

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