CSS फ्लेक्सबॉक्स जनरेटर
फ्लेक्सबॉक्स अलाइनमेंट से जूझ रहे हैं? हमारा मुफ़्त CSS Flexbox जनरेटर आपको फ्लेक्स कंटेनर लेआउट को दृश्य रूप से डिज़ाइन करने और प्रोडक्शन-रेडी CSS कोड निर्यात करने की सुविधा देता है। बस सहज नियंत्रणों का उपयोग करके फ्लेक्स डायरेक्शन, justify-content, align-items, flex-wrap, gap और अन्य प्रॉपर्टीज़ सेट करें — एक लाइव पूर्वावलोकन तुरंत अपडेट होता है, जिससे आप ठीक-ठीक देख सकते हैं कि आपका लेआउट कैसा दिखेगा। चाहे आप नेवबार, कार्ड ग्रिड, किसी div को सेंटर करना (आखिरकार!), या एक जटिल डैशबोर्ड लेआउट बना रहे हों, यह टूल फ्लेक्सबॉक्स को पूर्वानुमानित और पढ़ने योग्य बनाता है। अब मूल्यों का अनुमान लगाने या मार्जिन हैक्स से लड़ने की ज़रूरत नहीं। बस ड्रैग करें, ट्वीक करें और साफ़ CSS आउटपुट कॉपी करें।
क्या है
Flexbox (CSS फ्लेक्सिबल बॉक्स लेआउट) एक एक-आयामी लेआउट विधि है जो आइटम को पंक्तियों या स्तंभों में व्यवस्थित करने के लिए उपयोग की जाती है। यह कई क्लासिक CSS समस्याओं को हल करती है: वर्टिकल सेंटरिंग, समान-ऊंचाई वाले कॉलम, HTML बदले बिना आइटम को पुनर्व्यवस्थित करना, और शेष स्थान का कुशलतापूर्वक वितरण करना। मुख्य अवधारणाएँ: • फ्लेक्स कंटेनर — मूल तत्व जिसमें display: flex होता है। सभी सीधे चिल्ड्रेन फ्लेक्स आइटम बन जाते हैं। • मुख्य अक्ष — प्राथमिक दिशा जिसमें आइटम प्रवाहित होते हैं, इसे flex-direction द्वारा नियंत्रित किया जाता है (row | row-reverse | column | column-reverse)। • क्रॉस अक्ष — लंबवत दिशा। यहां संरेखण align-items (एकल पंक्ति के लिए) और align-content (एकाधिक पंक्तियों के लिए) द्वारा नियंत्रित किया जाता है। • justify-content — आइटम को मुख्य अक्ष के साथ संरेखित करता है। विकल्पों में flex-start, flex-end, center, space-between, space-around, space-evenly शामिल हैं। • align-items — आइटम को क्रॉस अक्ष के साथ संरेखित करता है। विकल्पों में stretch, flex-start, flex-end, center, baseline शामिल हैं। • flex-wrap — नियंत्रित करता है कि आइटम नई पंक्तियों में रैप हों या नहीं (nowrap | wrap | wrap-reverse)। • gap — आइटमों के बीच का अंतर, जो मार्जिन हैक्स की आवश्यकता को समाप्त करता है। व्यक्तिगत फ्लेक्स आइटम को flex-grow, flex-shrink, flex-basis, align-self और order द्वारा भी नियंत्रित किया जा सकता है। शॉर्टहैंड flex: 1, flex: 1 1 0% के बराबर है। ब्राउज़र समर्थन सार्वभौमिक है — सभी आधुनिक ब्राउज़र बिना किसी प्रीफिक्स के फ्लेक्सबॉक्स का समर्थन करते हैं। यह स्पेस 2012 से स्थिर है, जिससे यह प्रोडक्शन उपयोग के लिए सुरक्षित है।
कैसे उपयोग करें
- CSS Flexbox Generator खोलें। कैनवास पर कई चाइल्ड आइटम के साथ एक नमूना कंटेनर दिखाई देता है।
- कंटेनर के गुण सेट करें: flex-direction (पंक्ति या कॉलम) चुनें, ड्रॉपडाउन मेनू से justify-content और align-items चुनें, flex-wrap टॉगल करें यदि आप चाहते हैं कि आइटम नई लाइनों पर ओवरफ्लो हों।
- अंतर समायोजित करें: आइटमों के बीच समान अंतर सेट करने के लिए गैप स्लाइडर का उपयोग करें, या व्यक्तिगत आइटमों के लिए कस्टम मार्जिन/पैडिंग मान सेट करें।
- चाइल्ड आइटम कॉन्फ़िगर करें: प्रत्येक फ्लेक्स आइटम के लिए, flex-grow, flex-shrink, flex-basis मान सेट करें, या शॉर्टहैंड का उपयोग करें। HTML को बदले बिना दृश्य रूप से पुनर्व्यवस्थित करने के लिए ऑर्डर बदलें।
- संरेखण ओवरराइड के साथ प्रयोग करें: किसी विशिष्ट तत्व के लिए कंटेनर की align-items सेटिंग को ओवरराइड करने के लिए व्यक्तिगत आइटम पर align-self का उपयोग करें।
- जनरेट किए गए CSS आउटपुट को कॉपी करें। कोड में display: flex, सभी कॉन्फ़िगर किए गए गुण, और वैकल्पिक वेंडर प्रीफिक्स शामिल हैं। अपनी स्टाइलशीट में पेस्ट करें और आपका काम हो गया।
उदाहरण
इनपुट: दिशा: पंक्ति, औचित्य: स्थान-बीच, संरेखण: केंद्र, अंतर: 16px
प्रक्रिया: मुख्य अक्ष क्षैतिज सेट करें → आइटम को समान अंतराल पर वितरित करें → लंबवत केंद्रित करें
परिणाम: प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: पंक्ति; सामग्री-औचित्य: स्थान-बीच; आइटम-संरेखण: केंद्र; अंतराल: 16px
इनपुट: दिशा: कॉलम, रैप: रैप, एलाइन-आइटम्स: स्ट्रेच
प्रक्रिया: लंबवत स्टैकिंग → रैपिंग की अनुमति दें → आइटम्स को पूरी चौड़ाई तक फैलाएँ
परिणाम: display:flex; flex-direction:column; flex-wrap:wrap; align-items:stretch
इनपुट: फ्लेक्स-ग्रो: 1, 2, 1 वाले 3 आइटम
प्रक्रिया: कुल ग्रो अनुपात = 1+2+1=4 → आइटम1=25%, आइटम2=50%, आइटम3=25%
परिणाम: आइटम चौड़ाई: 25% | 50% | 25%
संबंधित खोजें
लोग यह भी खोजते हैं: सीएसएस, फ्लेक्सबॉक्स, फ्लेक्स, लेआउट, संरेखण।
सीएसएसफ्लेक्सबॉक्सफ्लेक्सलेआउटसंरेखण
अक्सर पूछे जाने वाले प्रश्न
फ्लेक्स और ग्रिड में क्या अंतर है?
फ्लेक्सबॉक्स एक-आयामी है — यह आइटम्स को एक ही अक्ष (पंक्ति या स्तंभ) पर व्यवस्थित करता है। सीएसएस ग्रिड दो-आयामी है — यह पंक्तियों और स्तंभों को एक साथ संभालता है। लीनियर लेआउट जैसे नेवबार, बटन समूह, या सामग्री को केंद्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करें। पूर्ण-पृष्ठ लेआउट, जटिल कार्ड ग्रिड, या पंक्तियों और स्तंभों दोनों पर सटीक नियंत्रण की आवश्यकता वाले किसी भी डिज़ाइन के लिए ग्रिड का उपयोग करें। कई वास्तविक दुनिया के लेआउट दोनों को जोड़ते हैं: समग्र पृष्ठ संरचना के लिए ग्रिड, घटक-स्तरीय संरेखण के लिए फ्लेक्सबॉक्स।
मैं flexbox के साथ एक div को कैसे केंद्रित करूं?
पैरेंट कंटेनर पर display: flex लागू करें, फिर horizontal centering के लिए justify-content: center और vertical centering के लिए align-items: center सेट करें। बस इतना ही — कोई absolute positioning नहीं, कोई negative margins नहीं, कोई JavaScript नहीं। यह flexbox का THE canonical उपयोग मामला है और यह सभी ब्राउज़रों पर विश्वसनीय रूप से काम करता है। यदि आप एक single child को केंद्रित कर रहे हैं, तो यह तरीका किसी भी अन्य विधि की तुलना में सरल और अधिक मजबूत है।
flex: 1 का वास्तव में क्या मतलब है?
flex: 1, flex: 1 1 0% का संक्षिप्त रूप है — जिसका अर्थ है flex-grow: 1, flex-shrink: 1, flex-basis: 0%. यह आइटम को आवश्यकतानुसार बढ़ने और सिकुड़ने का निर्देश देता है, शून्य चौड़ाई से शुरू करते हुए। जब कई सहोदर (siblings) में flex: 1 होता है, तो वे सभी शेष स्थान का बराबर हिस्सा प्राप्त करते हैं। यदि एक आइटम में flex: 2 और अन्य में flex: 1 है, तो पहले आइटम को अपने सहोदरों की तुलना में दोगुना खाली स्थान का अनुपात मिलता है।
मुझे margin के बजाय gap का उपयोग कब करना चाहिए?
फ्लेक्स आइटमों के बीच स्पेसिंग चाहिए तो gap (row-gap और column-gap) का उपयोग करें। Gap केवल समान स्तर के तत्वों के बीच लागू होता है — यह कंटेनर के किनारों पर अतिरिक्त स्थान नहीं बनाता। यह margin पर एक प्रमुख लाभ है, जो हर जगह स्पेस जोड़ता है, जिसमें पहले और अंतिम आइटम भी शामिल हैं। Gap के साथ, अब आपको पीछे के मार्जिन हटाने के लिए :last-child या :not(:last-child) सेलेक्टर्स की आवश्यकता नहीं है। Gap 2021 से सभी आधुनिक ब्राउज़रों में काम करता है।
क्या मैं HTML बदले बिना वस्तुओं के दृश्य क्रम को बदल सकता हूँ?
हाँ! फ्लेक्स आइटम्स पर ऑर्डर प्रॉपर्टी का उपयोग करें। डिफ़ॉल्ट ऑर्डर वैल्यू 0 है। कम ऑर्डर वैल्यू वाले आइटम पहले दिखाई देते हैं, भले ही वे HTML स्रोत में किसी भी स्थान पर हों। उदाहरण के लिए, order: -1 सेट करने से एक आइटम शुरुआत में चला जाता है। यह रिस्पॉन्सिव डिज़ाइन के लिए उपयोगी है — आप मोबाइल पर साइडबार को कंटेंट के नीचे दिखाना चाह सकते हैं, लेकिन डेस्कटॉप पर उसके बगल में। ध्यान दें कि ऑर्डर केवल विज़ुअल रेंडरिंग को बदलता है; यह कीबोर्ड नेविगेशन के लिए DOM ऑर्डर या टैब ऑर्डर को नहीं बदलता है।