CSS Flexbox प्लेग्राउंड
नयालाइव प्रीव्यू के साथ flex properties एडजस्ट करें और CSS कॉपी करें।
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
एक विज़ुअल फ्लेक्सबॉक्स जनरेटर जो आपके लिए CSS लिखता है
यह फ्लेक्सबॉक्स जनरेटर CSS Flexible Box Layout को कुछ ऐसा बनाता है जो आप देख सकते हैं। यह अंदाज़ा लगाने की बजाय कि justify-content या align-items क्या करेगा, आप एक लेबल वाले कंट्रोल पर हर प्रॉपर्टी टॉगल करते हैं और लाइव प्रीव्यू को तुरंत रीअरेंज होते देखते हैं — फिर क्लीन, प्रोडक्शन-रेडी कोड कॉपी करते हैं। यह पूरी तरह आपके ब्राउज़र में चलता है, बिना साइनअप और बिना कुछ अपलोड किए।
यह एक सच्चा फ्लेक्सबॉक्स प्लेग्राउंड है: एडिटेबल चाइल्ड आइटम्स के साथ एक असली flex कंटेनर, पूर्ण कंटेनर और प्रति-आइटम कंट्रोल, नेस्टेड कंटेनर, एक रिसाइज़ेबल रिस्पॉन्सिव प्रीव्यू और एक शेयर करने योग्य URL। चाहे आप flexbox सीख रहे हों या जल्दी से नेवबार, कार्ड रो या सेंटर्ड हीरो बना रहे हों — सेकंड में सटीक लेआउट और CSS, Tailwind या Bootstrap पाएं।
हर कंटेनर प्रॉपर्टी, लाइव प्रीव्यू के साथ
कंटेनर को वैसे कंट्रोल करें जैसा स्पेसिफिकेशन करता है। मेन एक्सिस चुनने के लिए flex-direction (row, row-reverse, column, column-reverse) सेट करें, उसके साथ आइटम स्पेस करने के लिए justify-content, और क्रॉस एक्सिस पर अलाइन करने के लिए align-items। आइटम नई लाइनों पर जाने के लिए flex-wrap चालू करें, उन रैप्ड लाइनों को स्पेस करने के लिए align-content उपयोग करें, और स्वतंत्र row और column gap वैल्यू डायल करें।
एक बिल्ट-इन एक्सिस लीजेंड दिखाता है कि flex-direction बदलने पर कौन सी दिशा मेन एक्सिस है और कौन सी क्रॉस एक्सिस — ताकि justify-content और align-items के बीच का संबंध आखिरकार समझ आए। यह एक प्रैक्टिकल flexbox चीट शीट है जो आप करके सीखते हैं।
प्रति-आइटम कंट्रोल: grow, shrink, basis, order और align-self
ज़्यादातर जनरेटर कंटेनर पर रुक जाते हैं। यह आपको प्रीव्यू में किसी भी आइटम पर क्लिक करके उसे अलग-अलग एडिट करने देता है: flex-grow, flex-shrink और flex-basis (flex शॉर्टहैंड) सेट करें, उसका align-self ओवरराइड करें, और HTML छुए बिना उसे रिपोज़िशन करने के लिए order बदलें। आइटम जोड़ें या हटाएं ताकि देख सकें कि स्पेस कैसे रिडिस्ट्रिब्यूट होता है।
इससे असली पैटर्न बनाना आसान हो जाता है — एक फ्लेक्सिबल मेन कॉलम के बगल में एक फिक्स्ड साइडबार (flex: 0 0 240px बगल में flex: 1), एक सिंगल सेंटर्ड आइटम, या margin-left: auto से आखिर में पुश किया गया फुटर लिंक।
नेस्टेड फ्लेक्सबॉक्स और रिस्पॉन्सिव प्रीव्यू
असली लेआउट नेस्ट होते हैं। कोई भी आइटम अपनी खुद की दिशा, justify और align के साथ अपना नेस्टेड flex कंटेनर बन सकता है — ठीक वही जो एक नेस्टेड फ्लेक्सबॉक्स जनरेटर को चाहिए — जैसे कार्ड जिनके बॉडी के ऊपर हेडर रो हो, या टूलबार के अंदर टूलबार। जनरेट किया गया कोड नेस्टेड रूल्स भी शामिल करता है।
चूंकि flexbox रिस्पॉन्सिव बिहेवियर के बारे में है, प्रीव्यू रिसाइज़ेबल है: हैंडल ड्रैग करें या मोबाइल / टैबलेट / डेस्कटॉप विड्थ प्रीसेट चुनें और देखें कि आइटम हर साइज़ पर कैसे रैप और रीअलाइन होते हैं। यह शिप करने से पहले एक रिस्पॉन्सिव flexbox लेआउट कन्फर्म करने का सबसे तेज़ तरीका है।
CSS, Tailwind या Bootstrap के रूप में कॉपी करें — और अन्य टूल्स से तुलना
अपने प्रोजेक्ट द्वारा उपयोग किया जाने वाला फॉर्मेट पाने के लिए आउटपुट टैब स्विच करें। CSS आपको flex शॉर्टहैंड का उपयोग करते हुए क्लीन .container और प्रति-आइटम रूल्स देता है। Tailwind यूटिलिटी क्लासेज़ लिखता है — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — पेस्ट-रेडी HTML स्निपेट पर। Bootstrap समकक्ष d-flex यूटिलिटी क्लासेज़ आउटपुट करता है। केवल वही प्रॉपर्टीज़ एमिट होती हैं जो आपने वास्तव में बदली हैं।
Flexbox.help जैसे अन्य विज़ुअल जनरेटर प्रति-आइटम कंट्रोल और नेस्टेड कंटेनर छोड़ देते हैं। Tailwind का ऑनलाइन प्लेग्राउंड vanilla CSS जनरेट नहीं करता। यह टूल तीनों आउटपुट फॉर्मेट करता है, नेस्टिंग हैंडल करता है, और लोड होने के बाद ऑफलाइन चलता है — कोई अकाउंट नहीं, कोई लागत नहीं, आपके ब्राउज़र से डेटा नहीं निकलता।
Frequently asked questions
CSS में Flexbox क्या है और इसे क्यों उपयोग किया जाता है?
Flexbox (CSS Flexible Box Layout) एक वन-डायमेंशनल लेआउट मॉडल है जो आइटम्स को एक सिंगल रो या कॉलम में अरेंज करने और उनके बीच स्पेस डिस्ट्रीब्यूट करने के लिए है। आप इसे पैरेंट एलिमेंट पर एक लाइन — display: flex — से चालू करते हैं, और इसके बच्चे flex आइटम बन जाते हैं जिन्हें आप floats या मैन्युअल मार्जिन के बिना अलाइन, स्पेस और रिसाइज़ कर सकते हैं। इसका उपयोग इसलिए किया जाता है क्योंकि यह सामान्य काम आसान बनाता है: सेंटरिंग, बराबर ऊंचाई वाले कॉलम, नेवबार, कार्ड रो।
Flexbox कैसे उपयोग करें?
कंटेनर एलिमेंट में display: flex जोड़ें, फिर कंटेनर प्रॉपर्टीज़ से बच्चों को कंट्रोल करें — flex-direction (row या column), justify-content (मेन एक्सिस पर स्पेसिंग), align-items (क्रॉस एक्सिस पर अलाइनमेंट), flex-wrap और gap। उदाहरण के लिए, .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } एक लोगो और लिंक को एक रो में, वर्टिकली सेंटर्ड, विपरीत सिरों पर रखता है।
Flexbox से div को कैसे सेंटर करें?
पैरेंट को flex कंटेनर बनाएं और दोनों एक्सिस पर सेंटर करें: .parent { display: flex; justify-content: center; align-items: center; } — यह बच्चे को हॉरिज़ॉन्टल और वर्टिकल दोनों में ठीक बीच में रखता है। पैरेंट को एक ऊंचाई दें (उदाहरण के लिए फुल-स्क्रीन सेंटरिंग के लिए min-height: 100vh)।
justify-content और align-items में क्या अंतर है?
justify-content मेन एक्सिस के साथ आइटम्स को पोज़िशन करता है, जबकि align-items उन्हें क्रॉस एक्सिस पर पोज़िशन करता है। डिफ़ॉल्ट flex-direction: row के साथ, justify-content आइटम्स को हॉरिज़ॉन्टल रूप से स्पेस करता है और align-items उन्हें वर्टिकली अलाइन करता है। flex-direction: column पर स्विच करें और दोनों बदल जाते हैं।
flex-grow, flex-shrink और flex-basis क्या हैं?
ये तीन प्रति-आइटम प्रॉपर्टीज़ हैं जो तय करती हैं कि flex आइटम कैसे साइज़ होता है, आमतौर पर flex शॉर्टहैंड के रूप में एक साथ लिखी जाती हैं। flex-basis फ्री स्पेस शेयर होने से पहले स्टार्टिंग साइज़ है। flex-grow बताता है कि आइटम कितनी तेज़ी से बचे स्पेस को भरने के लिए expand करता है (0 = नहीं बढ़ता, 1 = एक हिस्सा लेता है)। flex-shrink बताता है कि जब स्पेस कम हो तो यह कितनी आसानी से सिकुड़ता है।
flex आइटम्स को कैसे रैप करें?
कंटेनर पर flex-wrap: wrap सेट करें ताकि जो आइटम फिट नहीं होते वे ओवरफ्लो या स्क्वैश होने की बजाय नई लाइन पर जाएं। डिफ़ॉल्ट रूप से flex-wrap: nowrap है। रैपिंग चालू होने पर, आइटम्स को flex-basis दें (जैसे flex: 1 1 200px) ताकि हर रो अच्छे से भरे, और रिजल्टिंग लाइनों को स्पेस करने के लिए align-content उपयोग करें।
क्या यह flexbox जनरेटर मुफ़्त और प्राइवेट है?
बिना साइनअप के मुफ़्त। पूरा प्लेग्राउंड आपके ब्राउज़र में चलता है — आपका लेआउट, जनरेट किया गया CSS और शेयर लिंक सभी आपके डिवाइस पर बनते हैं और कभी सर्वर पर अपलोड नहीं होते। पेज लोड होने के बाद आप इसे बुकमार्क कर सकते हैं और ऑफलाइन उपयोग कर सकते हैं।
Related tools
सभी टूल्स देखें
नया कलर मिक्सर
दो रंगों को किसी भी अनुपात में मिलाएँ और परिणाम या कोई भी चरण कॉपी करें।
नया इमेज कलर पिकर
इमेज से कोई भी रंग चुनें और उसका प्रमुख पैलेट HEX, RGB और HSL में निकालें।
नया Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
नया Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
कलर पिकर और कन्वर्टर
एक रंग चुनें और उसे HEX, RGB, HSL और OKLCH में बदलें।
नया कलर कंट्रास्ट चेकर
टेक्स्ट और बैकग्राउंड रंगों के बीच WCAG AA/AAA कंट्रास्ट अनुपात जाँचें।