CSS Flexbox प्लेग्राउंड
flexbox कंटेनर और आइटम गुणों के साथ दृश्य रूप से प्रयोग करें। लाइव प्रीव्यू और सामान्य लेआउट के लिए प्रीसेट के साथ CSS, Tailwind और HTML आउटपुट बनाएं।
अपडेट किया गया
CSS Flexbox Playground
Visually experiment with CSS flexbox container and item properties, then copy CSS, Tailwind, or HTML output.
Preset Scenarios
Containerflex
Live Preview3 items
Items (3/12)
Generated Code
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}
.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}अक्सर पूछे जाने वाले प्रश्न
CSS Flexbox Playground क्या है?
CSS Flexbox Playground एक मुफ़्त ऑनलाइन टूल है जिससे आप flexbox कंटेनर और आइटम गुणों के साथ दृश्य रूप से प्रयोग कर सकते हैं। यह लाइव प्रीव्यू और सामान्य लेआउट के प्रीसेट के साथ CSS, Tailwind और HTML आउटपुट तैयार करता है। यह पूरी तरह आपके ब्राउज़र में चलता है, बिना किसी इंस्टॉलेशन या साइन-अप के।
flex बनाम inline-flex?
display:flex एक ब्लॉक-स्तरीय flex कंटेनर है जो पैरेंट की पूरी चौड़ाई लेता है। inline-flex इनलाइन-स्तर का होता है और केवल अपनी सामग्री की चौड़ाई लेता है, आसपास के टेक्स्ट के साथ प्रवाहित होते हुए।
flex-grow बनाम flex-basis?
flex-basis खाली जगह वितरित होने से पहले का प्रारंभिक आकार निर्धारित करता है। flex-grow यह परिभाषित करता है कि बची हुई खाली जगह आइटमों के बीच कैसे बाँटी जाए।
मैं सामग्री को केंद्र में कैसे लाऊँ?
पैरेंट: display:flex + justify-content:center + align-items:center। Centered प्रीसेट ठीक यही कॉन्फ़िगरेशन लागू करता है।
क्या CSS Flexbox Playground उपयोग करने के लिए मुफ़्त है?
हाँ, CSS Flexbox Playground 100% मुफ़्त है — बिना पंजीकरण, बिना छिपे शुल्क और बिना उपयोग सीमा के। पूरी प्रोसेसिंग आपके ब्राउज़र में स्थानीय रूप से होती है, जिससे पूर्ण गोपनीयता सुनिश्चित होती है।
क्या इस टूल के साथ मेरा डेटा सुरक्षित है?
बिल्कुल। CSS Flexbox Playground सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या स्टोर नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।
क्या CSS Flexbox Playground मोबाइल डिवाइस पर काम करता है?
हाँ, CSS Flexbox Playground पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन व टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर इस्तेमाल कर सकते हैं — किसी ऐप को डाउनलोड करने की ज़रूरत नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में CSS Flexbox Playground खोलें और तुरंत इस्तेमाल शुरू करें। कोई साइन-अप रुकावट या उपयोग की सीमा नहीं है।
यह टूल किन प्रोग्रामिंग भाषाओं या फ़ॉर्मैट का समर्थन करता है?
CSS Flexbox Playground लोकप्रिय फ़ॉर्मैट और भाषाओं की एक विस्तृत श्रृंखला का समर्थन करता है। समर्थित विकल्पों की पूरी सूची के लिए टूल का इंटरफ़ेस देखें।
कौन-से ब्राउज़र समर्थित हैं?
CSS Flexbox Playground सभी आधुनिक ब्राउज़रों में काम करता है, जिनमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र के नवीनतम संस्करण का उपयोग करें।
flexbox में justify-content और align-items में क्या अंतर है?
ये दोनों प्रॉपर्टीज़ आइटम्स को अलग-अलग एक्सिस पर मूव कराती हैं। justify-content आइटम्स को मेन एक्सिस पर पोज़िशन करता है — यानी वह दिशा जो flex-direction तय करता है, इसलिए यह row में हॉरिज़ॉन्टल स्पेसिंग और column में वर्टिकल स्पेसिंग कंट्रोल करता है। align-items आइटम्स को क्रॉस एक्सिस पर, यानी परपेंडिकुलर दिशा में पोज़िशन करता है, इसलिए यह row में वर्टिकल अलाइनमेंट और column में हॉरिज़ॉन्टल अलाइनमेंट संभालता है। इसीलिए flex-direction को row से column में बदलने पर ऐसा लगता है जैसे दोनों प्रॉपर्टीज़ का काम आपस में बदल गया हो। justify-content में flex-start, center, space-between, space-around, और space-evenly जैसी वैल्यूज़ मिलती हैं, जबकि align-items में stretch, flex-start, flex-end, center, और baseline। याद रखने का एक आसान तरीका: justify आइटम्स को लाइन के आर-पार फैलाता है, align उन्हें ऊपर-नीचे पोज़िशन करता है। इस Playground में आप हर प्रॉपर्टी को अलग-अलग टॉगल करके डैश्ड प्रीव्यू को तुरंत बदलते देख सकते हैं, जिससे मेन-एक्सिस बनाम क्रॉस-एक्सिस का फ़र्क बिना स्पेक रटे साफ़ हो जाता है, फिर आप नतीजे में मिला CSS या Tailwind क्लासेज़ कॉपी कर सकते हैं।
flexbox से कार्ड्स की रिस्पॉन्सिव ग्रिड कैसे बनाएँ?
कंटेनर को display:flex के साथ flex-wrap:wrap सेट करें ताकि जगह खत्म होने पर आइटम्स नई लाइन में चले जाएँ, फिर हर कार्ड को एक साझा flex-basis दें जो यह तय करे कि रैप होने से पहले वह कितना चौड़ा रहेगा। 200px जैसा एक basis, flex-grow के साथ मिलकर कार्ड्स को रो भरने के लिए फैलने देता है और छोटी स्क्रीन पर कम कॉलम्स में रीफ़्लो होने देता है, वह भी बिना किसी मीडिया क्वेरी के। एक gap जोड़ने से रो और कॉलम के बीच एक जैसी स्पेसिंग बनी रहती है। इस Playground का Card Grid प्रीसेट बिल्कुल यही सेटअप लोड करता है — छह रैप होने वाले कार्ड्स, एक साझा flex-basis और 16px का gap — जिससे आप एक वर्किंग रिस्पॉन्सिव लेआउट को समझ सकते हैं, basis या आइटम काउंट बदल सकते हैं, और प्रीव्यू की चौड़ाई बदलने पर कॉलम्स को लाइव रीफ़्लो होते देख सकते हैं। चूँकि कार्ड्स अपना साइज़ किसी फिक्स्ड कॉलम काउंट के बजाय अपने basis से तय करते हैं, इसलिए यही नियम बड़े डेस्कटॉप से लेकर फ़ोन तक अपने आप ढल जाते हैं। जब सब सही लगे, तो जेनरेट हुआ CSS या Tailwind क्लासेज़ सीधे अपने प्रोजेक्ट में कॉपी कर लें।
flex शॉर्टहैंड में flex: 0 0 240px का क्या मतलब है?
flex तीन प्रॉपर्टीज़ का शॉर्टहैंड है, इसी क्रम में: flex-grow, flex-shrink, और flex-basis। इसलिए flex: 0 0 240px का मतलब है flex-grow:0 (आइटम अतिरिक्त जगह भरने के लिए नहीं फैलेगा), flex-shrink:0 (जगह कम होने पर भी यह अपने साइज़ से छोटा नहीं होगा), और flex-basis:240px (इसकी शुरुआती चौड़ाई 240px पर फिक्स्ड है)। नतीजा एक कठोर, फिक्स्ड-विड्थ एलिमेंट होता है — यह उस साइडबार के लिए एकदम सही है जिसे 240px चौड़ा ही बने रहना चाहिए जबकि मेन कंटेंट एरिया उसके आसपास फ्लेक्स करता रहे। यहाँ का Sidebar Layout प्रीसेट अपने फिक्स्ड कॉलम के लिए ठीक यही वैल्यू इस्तेमाल करता है, जो एक फ्लेक्सिबल मेन एरिया के बगल में रहता है। इसके उलट, flex: 1 का विस्तार flex-grow:1, flex-shrink:1, flex-basis:0 में होता है, जिससे आइटम उपलब्ध जगह को लालच से भर लेता है — यानी बिल्कुल उल्टा व्यवहार। चूँकि यह Playground हर आइटम कार्ड पर flex-grow, flex-shrink, और flex-basis को अलग-अलग प्रति-आइटम कंट्रोल्स के रूप में दिखाता है, आप इस शॉर्टहैंड को टुकड़े-टुकड़े करके सेट कर सकते हैं, लाइव प्रीव्यू में असर देख सकते हैं, और साफ़-सुथरा CSS आउटपुट कॉपी कर सकते हैं।
मेरे flex आइटम्स पर align-items का कोई दिखने वाला असर क्यों नहीं हो रहा?
align-items तभी कुछ बदलता है जब आइटम्स क्रॉस एक्सिस पर कंटेनर से छोटे हों, क्योंकि यह उन्हें उस बची हुई जगह में पोज़िशन करता है। दो आम स्थितियाँ इसके असर को छिपा देती हैं। पहली, align-items की डिफ़ॉल्ट वैल्यू stretch होती है, जिससे आइटम्स क्रॉस एक्सिस को पूरा भरने के लिए फैल जाते हैं — इसलिए वे row में पहले से ही पूरी हाइट में फैले होते हैं और अलाइन करने के लिए कोई गैप बचता ही नहीं। दूसरी, अगर हर आइटम कंटेनर जितना ही बड़ा है या उसकी कोई स्पष्ट height नहीं है, तो flex-start, center, और flex-end के बीच स्विच करने पर कोई दिखने वाली हलचल नहीं होती। आइटम्स को फिक्स्ड width या height दें, या align-items को stretch से हटाकर कुछ और सेट करें, तो अलाइनमेंट साफ़ नज़र आने लगेगा। अगर आप सिर्फ़ एक ही चाइल्ड को अलग तरह से पोज़िशन करना चाहते हैं, तो align-self से उसे ओवरराइड भी किया जा सकता है। इस Playground में आप हर आइटम कार्ड पर प्रति-आइटम width और height सेट कर सकते हैं, फिर align-items को टॉगल करके ठीक-ठीक देख सकते हैं कि यह कब असर दिखाता है, इसके बाद कोड कॉपी करें।
flex-wrap के wrap और nowrap में क्या अंतर है?
flex-wrap यह तय करता है कि flex आइटम्स को एक ही लाइन में रहने पर मजबूर किया जाए या उन्हें कई लाइनों में फैलने दिया जाए। डिफ़ॉल्ट nowrap में, सभी आइटम्स एक ही लाइन में रहते हैं और फ़िट होने के लिए सिकुड़ जाते हैं, जिससे जगह कम पड़ने पर वे दब सकते हैं या ओवरफ़्लो हो सकता है। wrap में, जो आइटम्स फ़िट नहीं होते वे नई लाइन में चले जाते हैं, अपना पसंदीदा साइज़ बनाए रखते हैं और एक मल्टी-रो लेआउट बनाते हैं — जो रिस्पॉन्सिव कार्ड ग्रिड्स और टैग लिस्ट्स के लिए ज़रूरी है। इसके अलावा wrap-reverse भी है, जिसमें नई लाइनें उल्टी दिशा में स्टैक होकर रैप होती हैं। ध्यान दें कि align-content, जो इन रैप हुई लाइनों को बाँटता है, तभी असर दिखाता है जब रैपिंग से वाकई एक से ज़्यादा लाइन बनती है। यह Playground nowrap, wrap, और wrap-reverse को एक ही कंट्रोल के रूप में दिखाता है, जिससे आप इनके बीच स्विच करके लाइव प्रीव्यू में आइटम्स को रीफ़्लो होते देख सकते हैं, फिर कोड कॉपी कर सकते हैं।
संबंधित टूल
मुफ़्त API टेस्टर ऑनलाइन
GET, POST, PUT, DELETE अनुरोधों के साथ REST API का परीक्षण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त cURL से कोड कन्वर्टर
cURL कमांड को JavaScript, Python, PHP कोड में बदलें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON Schema जनरेटर
अपने JSON डेटा से स्वचालित रूप से JSON Schema बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त HTTP हेडर पार्सर
अनुरोधों और प्रतिक्रियाओं के HTTP हेडर पार्स और विश्लेषण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
CSS Flexbox Playground के बारे में
CSS Flexbox Playground, flexbox लेआउट सीखने और बनाने के लिए एक मुफ़्त विज़ुअल सैंडबॉक्स है। CSS एडिट करने, ब्राउज़र रीफ़्रेश करने, और यह अंदाज़ा लगाने के बजाय कि आइटम सही से अलाइन क्यों नहीं हो रहे, आप बस कंट्रोल पैनल से हर flexbox प्रॉपर्टी को टॉगल करते हैं और लाइव प्रीव्यू को तुरंत बदलते हुए देखते हैं। जब लेआउट सही लगे, तो टूल आपको तीन फ़ॉर्मेट में सीधे पेस्ट करने लायक कोड देता है: प्लेन CSS, Tailwind CSS क्लासेज़, और raw HTML। यह फ्रंट-एंड डेवलपर्स, लेआउट सीख रहे स्टूडेंट्स, और उन डिज़ाइनरों के लिए बनाया गया है जो स्टाइलशीट छूने से पहले ही लेआउट को सटीक करना चाहते हैं।
सब कुछ आपके ब्राउज़र में लोकली चलता है। कोई साइन-अप नहीं, कोई अकाउंट नहीं, और सर्वर पर कुछ भी नहीं भेजा जाता — प्रीव्यू आपके ब्राउज़र के अपने लेआउट इंजन से रेंडर होता है, और जेनरेट किया गया कोड आपकी डिवाइस पर ही तैयार होता है। इसका मतलब यह भी है कि जो अलाइनमेंट आप यहाँ देखते हैं, वह बिल्कुल वैसा ही है जैसा एक असली ब्राउज़र उसे रेंडर करेगा।
आप क्या-क्या कंट्रोल कर सकते हैं
यह Playground flexbox के दोनों हिस्सों — कंटेनर और उसके आइटम्स — को उसी तरह अलग रखता है जैसे CSS स्पेक करता है।
- कंटेनर प्रॉपर्टीज़:
display(flex या inline-flex),flex-direction(row, row-reverse, column, column-reverse),flex-wrap(nowrap, wrap, wrap-reverse),justify-content(flex-start से space-evenly तक छह वैल्यूज़),align-items(baseline सहित पाँच वैल्यूज़),align-content, और 0 से 64px तक का एकgapस्लाइडर। - प्रति-आइटम प्रॉपर्टीज़:
flex-grow,flex-shrink,flex-basis,order,align-self, साथ ही स्पष्टwidthऔरheight। हर आइटम का अपना अलग कार्ड होता है, जिससे आप एक चाइल्ड कोflex-grow: 1दे सकते हैं जबकि दूसरे को फिक्स्डflex-basisपर टिकाकर रख सकते हैं।
आप 12 आइटम्स तक जोड़ सकते हैं और घटाकर एक ही चाइल्ड तक ला सकते हैं, जो नेवबार, कार्ड ग्रिड, और पूरे पेज शेल्स को प्रोटोटाइप करने के लिए काफ़ी है।
प्रीव्यू से कॉपी-पेस्ट कोड तक
जैसे ही आप कोई भी कंट्रोल बदलते हैं, तीन चीज़ें एक साथ अपडेट होती हैं: डैश्ड-बॉर्डर वाला प्रीव्यू, और CSS, Tailwind, और Raw HTML आउटपुट टैब्स। हर टैब में एक-क्लिक कॉपी बटन होता है।
- CSS टैब सबसे प्रामाणिक आउटपुट है। यह एक
.flex-containerरूल और हर चाइल्ड के लिए एक नंबर वाला.flex-item-Nरूल लिखता है, औरorder: 0जैसे डिफ़ॉल्ट्स को छोड़ देता है ताकि नतीजा साफ़-सुथरा रहे। - Tailwind टैब आपकी सेटिंग्स को यूटिलिटी क्लासेज़ में मैप करता है — जैसे
justify-between,items-center,flex-col— और जब कोई सटीक यूटिलिटी मौजूद नहीं होती, तोgap-[16px]जैसी आर्बिट्रेरी वैल्यूज़ पर चला जाता है। - Raw HTML टैब आपको CSS के साथ इस्तेमाल करने लायक मैचिंग मार्कअप देता है।
आम लेआउट्स के लिए बिल्ट-इन प्रीसेट्स
पाँच प्रीसेट सिनेरियो एक क्लिक में एक पूरा, वर्किंग कॉन्फ़िगरेशन लोड करते हैं, ताकि आप किसी जाने-पहचाने सही लेआउट को समझ सकें या अपने लक्ष्य के करीब किसी चीज़ से शुरुआत कर सकें:
- Navbar — लोगो बाईं ओर, लिंक दाईं ओर,
justify-content: space-betweenके साथ सेंटर किए हुए आइटम्स। - Card Grid — छह रैप होने वाले कार्ड्स,
flex-wrap: wrapऔर रिस्पॉन्सिव कॉलम्स के लिए साझाflex-basisके साथ। - Sidebar Layout — फिक्स्ड-विड्थ साइडबार (
flex: 0 0 240px) के बगल में एक फ्लेक्सिबल मेन एरिया। - Footer —
space-aroundका उपयोग करके बंटे हुए कॉलम्स। - Centered —
justify-content: centerऔरalign-items: centerके ज़रिए क्लासिक "परफेक्टली सेंटर्ड" बॉक्स।
Flexbox playground क्यों मददगार है
Flexbox लोगों को इसलिए उलझन में डालता है क्योंकि इसकी प्रॉपर्टीज़ आपस में इंटरैक्ट करती हैं। align-items तभी कुछ असर दिखाता है जब आइटम क्रॉस एक्सिस से छोटे हों; जब आप flex-direction: column पर स्विच करते हैं तो justify-content की दिशा पलट जाती है; और flex-grow तभी मायने रखता है जब बाँटने के लिए कोई खाली जगह मौजूद हो। इन नियमों को अपने खुद के आइटम काउंट और साइज़ के साथ लाइव देखना, स्पेक पढ़ने से कहीं ज़्यादा तेज़ी से इन कामचलाऊ शब्दों को मसल मेमोरी में बदल देता है। और क्योंकि आउटपुट सिर्फ़ स्क्रीनशॉट नहीं बल्कि असली, कॉपी करने लायक CSS और Tailwind है, यह Playground एक कोड जनरेटर के रूप में भी काम करता है — तब तक प्रयोग करते रहें जब तक लाइव प्रीव्यू आपके डिज़ाइन से मेल न खा जाए, फिर नतीजे को सीधे अपने प्रोजेक्ट में पेस्ट कर दें।