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

फ्लेक्सबॉक्स नेविगेशन बार बनाना

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

प्रयुक्त प्रमुख फ्लेक्सबॉक्स गुण

1. फ्लेक्स कंटेनर डिस्प्ले: फ्लेक्स: नेविगेशन मेनू को उल तत्व पर डिस्प्ले: फ्लेक्स लागू करके एक फ्लेक्स कंटेनर बनाया गया था। इससे मुझे कंटेनर के भीतर सूची आइटमों को फ्लेक्स आइटम के रूप में व्यवस्थित करने की अनुमति मिली।

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

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

निष्कर्ष

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