CSS Flexbox जेनरेटर
CSS Flexbox एक शक्तिशाली लेआउट मॉडल है जिसका उपयोग वेब पेजों पर तत्वों को व्यवस्थित करने के लिए किया जाता है। यह मॉडल एक-आयामी (one-dimensional) लेआउट को ध्यान में रखकर बनाया गया है, जिससे तत्वों को पंक्तियों (rows) या कॉलमों (columns) में संरेखित करना आसान हो जाता है। "Flexbox जेनरेटर" एक विज़ुअल टूल है जो आपको एक flex कंटेनर और उसके भीतर के आइटम को आसानी से सेट करने की सुविधा देता है। इस टूल की मदद से आप विभिन्न प्रॉपर्टीज़ को बदलकर लाइव प्रीव्यू देख सकते हैं और अपनी डिज़ाइन के लिए सीधे CSS कोड कॉपी कर सकते हैं।
कंटेनर प्रॉपर्टीज़ को समझना
Flexbox लेआउट की शुरुआत एक पैरेंट एलिमेंट से होती है जिसे flex कंटेनर कहा जाता है। इस कंटेनर पर लागू होने वाली प्रॉपर्टीज़ पूरे लेआउट के व्यवहार को नियंत्रित करती हैं:
- दिशा: यह तय करता है कि आइटम किस दिशा में व्यवस्थित होंगे। इसके विकल्पों में 'रो' (Row), 'रो रिवर्स', 'कॉलम', और 'कॉलम रिवर्स' शामिल हैं। जब आप दिशा को रो से कॉलम में बदलते हैं, तो मुख्य अक्ष (main axis) और क्रॉस अक्ष (cross axis) आपस में बदल जाते हैं, जिससे संरेखण का तरीका भी बदल जाता है।
- रैप (Wrap): डिफ़ॉल्ट रूप से, सभी आइटम एक ही लाइन में फिट होने की कोशिश करते हैं। 'नो-रैप' (No wrap) सेटिंग के साथ सभी आइटम एक ही लाइन पर बने रहने के लिए मजबूर होते हैं। 'रैप' (Wrap) चालू करने पर, जो आइटम कंटेनर की चौड़ाई में नहीं समाते, वे अगली लाइन में चले जाते हैं। इसके अलावा 'रैप रिवर्स' का विकल्प भी उपलब्ध है।
- कंटेंट का संरेखण: यह मुख्य अक्ष पर आइटम के बीच और उनके आस-पास की खाली जगह को नियंत्रित करता है। इसके विकल्पों में 'शुरू', 'अंत' (End), 'सेंटर', 'बीच में जगह', 'चारों ओर जगह', और 'बराबर जगह' शामिल हैं।
- आइटम का संरेखण: यह क्रॉस अक्ष पर आइटम को संरेखित करता है। इसके लिए आप 'शुरू', 'अंत' (End), 'सेंटर', 'स्ट्रेच', या 'बेसलाइन' चुन सकते हैं।
- कंटेंट पंक्तियों का संरेखण: यह प्रॉपर्टी केवल तब काम करती है जब रैप चालू हो और कंटेनर में कई पंक्तियाँ बन रही हों। यह उन पंक्तियों के समूह के बीच की जगह को 'शुरू', 'अंत' (End), 'सेंटर', 'स्ट्रेच', 'बीच में जगह', 'चारों ओर जगह', या 'बराबर जगह' के अनुसार बाँटता है।
- गैप (Gap): यह एक संख्यात्मक मान होता है जो आइटम के बीच और पंक्तियों के बीच की खाली जगह (spacing) को निर्धारित करता है।
आइटम प्रॉपर्टीज़ का नियंत्रण
कंटेनर के अलावा, आप व्यक्तिगत flex आइटम के व्यवहार को भी नियंत्रित कर सकते हैं। टूल में केवल उन्हीं आइटम के लिए अलग से CSS नियम जनरेट किए जाते हैं जिनकी प्रॉपर्टीज़ में बदलाव किया गया हो:
- क्रम: यह एक संख्यात्मक मान है जो HTML संरचना को बदले बिना स्क्रीन पर आइटम के दिखने के क्रम को बदल देता है।
- बढ़ाव (Grow): यह संख्यात्मक मान तय करता है कि यदि कंटेनर में अतिरिक्त खाली जगह उपलब्ध है, तो वह आइटम कितना बड़ा हो सकता है।
- सिकुड़ाव: यह संख्यात्मक मान यह निर्धारित करता है कि जगह कम होने पर आइटम कितना सिकुड़ सकता है।
- आधार: यह आइटम का शुरुआती आकार तय करता है। इसे एक संख्यात्मक मान या 'ऑटो' (Auto) पर सेट किया जा सकता है।
- स्वयं का संरेखण: यह किसी एक विशिष्ट आइटम को क्रॉस अक्ष पर अपनी खुद की अलाइनमेंट सेट करने की अनुमति देता है, जो कंटेनर के 'align-items' को ओवरराइड करती है। इसके विकल्पों में 'ऑटो' (Auto), 'शुरू', 'अंत' (End), 'सेंटर', 'स्ट्रेच', और 'बेसलाइन' शामिल हैं।
सामान्य लेआउट पैटर्न
Flexbox का उपयोग करके कई सामान्य वेब लेआउट आसानी से बनाए जा सकते हैं:
- सेंटर: किसी तत्व को पैरेंट कंटेनर के ठीक बीच में (क्षैतिज और लंबवत दोनों रूप से) संरेखित करना।
- नेवबार: एक नेविगेशन बार जहाँ लोगो एक तरफ होता है और लिंक दूसरी तरफ समान दूरी पर फैले होते हैं।
- स्टैक: तत्वों को एक के ऊपर एक लंबवत रूप से व्यवस्थित करना।
- कार्ड: ग्रिड जैसे दिखने वाले कार्ड लेआउट जो स्क्रीन के आकार के अनुसार खुद को ढाल लेते हैं।
- साइडबार: एक मुख्य कंटेंट एरिया के साथ बगल में एक निश्चित या लचीली चौड़ाई का साइडबार बनाना।
गोपनीयता और डेटा प्रोसेसिंग
इस टूल का उपयोग करते समय आपकी गोपनीयता पूरी तरह सुरक्षित रहती है। आपका लेआउट सीधे आपके ब्राउज़र में ही बनता है। यहाँ आप जो भी सेटिंग्स या मान चुनते हैं, वह BroBroGo पर अपलोड नहीं होता है। सारा प्रोसेसिंग कार्य स्थानीय स्तर पर आपके डिवाइस पर ही निष्पादित होता है।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
justify-content और align-items में क्या फ़र्क़ है?
justify-content आइटम को मुख्य अक्ष (main axis) — यानी जिस दिशा में row या column बहता है — पर बाँटता है, जबकि align-items उन्हें दूसरी अक्ष पर सेट करता है। दिशा row से column करते ही दोनों अक्ष आपस में बदल जाती हैं, तो justify-content ऊपर-नीचे और align-items बाएँ-दाएँ काम करने लगता है।
हर आइटम के अलग कंट्रोल कैसे काम करते हैं?
नंबर से एक आइटम चुनें, फिर तय करें कि खाली जगह भरने के लिए वह कितना grow करे, जगह कम हो तो कितना shrink करे, उसका शुरुआती साइज़ (basis) क्या हो और उसकी अपनी cross-axis अलाइनमेंट क्या हो। order आइटम को HTML बदले बिना स्क्रीन पर आगे या पीछे कर देता है। सिर्फ़ उन्हीं आइटम के लिए CSS में अलग नियम बनता है जिन्हें आपने सच में बदला है।
wrap और align-content कब मायने रखते हैं?
wrap बंद हो तो सभी आइटम एक ही लाइन में रहते हैं और पतले दब सकते हैं। इसे चालू करें तो जो आइटम नहीं समाते वे अगली लाइन में चले जाते हैं — तभी align-content काम में आता है और सभी लाइनों को एक समूह मानकर उनके बीच जगह बाँटता है। gap बिना margin के आइटम और लाइनों के बीच का अंतर तय करता है।