लेक्चर नोट्स: फ़्लेक्स बॉक्स कंसेप्ट

परिचय

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

फ़्लेक्स बॉक्स का महत्व

• फ़्लेक्स बॉक्स और ग्रिड्स लेआउट के लिए शक्तिशाली टूल्स हैं।
• ये होरिजॉन्टल और वर्टिकल दोनों डायरेक्शन में आइटम्स को प्लेस कर सकते हैं।
• वेबसाइट 'Code Help' की फ़्लेक्स बॉक्स गेम का उल्लेख किया गया है जो फ़्लेक्स बॉक्स को समझने में मदद कर सकता है।

फ़्लेक्स बॉक्स की परिभाषा

• फ़्लेक्सिबल बॉक्स: आइटम्स को प्लेस करने और उनके बीच स्पेसिंग को मैनेज करने की फ्लेक्सिबिलिटी प्रदान करता है।
• फ़्लेक्स कंटेनर और फ़्लेक्स आइटम्स की अवधारणाएँ।

फ़्लेक्स बॉक्स के तत्व

• फ़्लेक्स कंटेनर: पैरंट एलिमेंट जिसमें फ़्लेक्स आइटम्स होते हैं।
• फ़्लेक्स आइटम्स: फ़्लेक्स कंटेनर के अंदर मौजूद चाइल्ड एलिमेंट्स।
• मेन एक्सिस: बाय डिफॉल्ट होरिजॉन्टल डायरेक्शन।
• क्रॉस एक्सिस: बाय डिफॉल्ट वर्टिकल डायरेक्शन।

प्रमुख प्रॉपर्टीज

1. डिस्प्ले: फ़्लेक्स
   • किसी भी डिव को फ़्लेक्स कंटेनर में बदलने के लिए डिस्प्ले प्रॉपर्टी का उपयोग।
2. फ़्लेक्स डायरेक्शन
   • row, row-reverse, column, column-reverse का उपयोग कर आइटम्स की दिशा सेट करना।
3. जस्टिफाई कंटेंट
   • मेन एक्सिस के अनुसार आइटम्स की प्लेसमेंट को कंट्रोल करता है।
4. एलाइन आइटम्स
   • क्रॉस एक्सिस पर आइटम्स की एलाइनमेंट को कंट्रोल करता है।
5. फ़्लेक्स रेप
   • आइटम्स की रैपिंग को नियंत्रित करता है।

फ़्लेक्स आइटम्स के प्रॉपर्टीज

1. ऑर्डर: आइटम्स के अनुक्रम को सेट करने के लिए।
2. फ़्लेक्स ग्रो: आइटम्स के बढ़ने की गति।
3. फ़्लेक्स श्रिंक: आइटम्स के सिकुड़ने की गति।
4. फ़्लेक्स बेसिस: आइटम्स की प्रारंभिक width.
5. एलाइन सेल्फ: व्यक्तिगत आइटम की प्लेसमेंट।

शॉर्ट हैंड नोटेशन

• फ़्लेक्स फ्लो: फ़्लेक्स डायरेक्शन और फ़्लेक्स रेप को शॉर्ट हैंड में सेट करता है।

निष्कर्ष

• फ़्लेक्स बॉक्स के माध्यम से लेआउटिंग की जटिलताओं को सरल किया जा सकता है।
• फ़्लेक्स बॉक्स गेम के माध्यम से एक प्रैक्टिकल समझ विकसित की गई।
• यह टूल वेब डेवलपमेंट में आवश्यक है और इसके बिना कुछ भी संभव नहीं है।