Flexbox प्लेग्राउंड

सभी tools

लाइव आइटम पर CSS Flexbox गुणों के साथ प्रयोग करें और उत्पन्न लेआउट CSS कॉपी करें।

पूर्वावलोकन किसी आइटम को संपादित करने के लिए उस पर क्लिक करें
उत्पन्न CSS
—

सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।

कंटेनर
12px
आइटम
0
चयनित आइटम

Flexbox प्लेग्राउंड के बारे में

Flexbox Playground CSS flexbox के लिए एक हाथों-हाथ आज़माने वाला सैंडबॉक्स है। कंटेनर प्रॉपर्टीज़ — flex-direction, flex-wrap, justify-content, align-items, align-content और gap — सेट करें और देखें कि हर वैल्यू बदलने पर प्रीव्यू में 12 तक लाइव आइटम कैसे फिर से व्यवस्थित होते हैं। हर प्रॉपर्टी असल में क्या करती है, यह समझने का यह सबसे तेज़ तरीका है।

आइटम अलग-अलग एडिट किए जा सकते हैं: किसी एक पर क्लिक करके उसे चुनें और उसके flex-grow, flex-shrink, flex-basis, align-self और order को समायोजित करें। यह देखना कि एक आइटम बढ़कर खाली जगह घेर लेता है जबकि उसके साथी अपनी चौड़ाई बनाए रखते हैं — किसी भी डायग्राम से तेज़ी से flex साइज़िंग मॉडल सिखाता है।

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

Flexbox प्लेग्राउंड का उपयोग कैसे करें

  1. कंटेनर का flex-direction, wrap, justify-content, align-items, align-content और gap सेट करें।
  2. अपने असली कंपोनेंट को दर्शाने के लिए आइटम जोड़ें या हटाएं — 2 से 12 के बीच।
  3. किसी आइटम पर क्लिक करें और उसका grow, shrink, basis, align-self और order समायोजित करें।
  4. हर बदलाव के साथ लाइव प्रीव्यू को अपडेट होते देखें।
  5. जनरेट किए गए CSS को कॉपी करके अपने प्रोजेक्ट में पेस्ट करें।

अक्सर पूछे जाने वाले प्रश्न

flex-grow बची हुई जगह को बांटता है: grow 2 वाला आइटम, grow 1 वाले आइटम की तुलना में दोगुनी अतिरिक्त जगह पाता है। जब जगह कम पड़ती है तो flex-shrink उल्टे तरीके से काम करता है। दोनों साथी आइटम के बीच अनुपात हैं, न कि पूर्ण साइज़।

align-items आइटम को उनकी लाइन के भीतर क्रॉस अक्ष पर पोज़िशन करता है। align-content कंटेनर के भीतर कई रैप हुई लाइनों के बीच जगह बांटता है — इसका असर तभी दिखता है जब flex-wrap एक से ज़्यादा लाइन बनाता है।

हर flex आइटम डिफ़ॉल्ट रूप से order 0 पर होता है; आइटम सबसे कम order से सबसे ज़्यादा order तक क्रम में लगाए जाते हैं। किसी आइटम का order बदलने से वह HTML को छुए बिना विज़ुअल रूप से हिल जाता है — DOM क्रम, और इसलिए स्क्रीन-रीडर क्रम, वही रहता है।

हां। जनरेट किया गया CSS कंटेनर नियमों के साथ-साथ हर उस आइटम के लिए एक सिलेक्टर भी देता है जिसका grow, shrink, basis, align-self या order डिफ़ॉल्ट से अलग है, ताकि आप एक पूरा, काम करने वाला लेआउट पेस्ट कर सकें।

हां — मुफ़्त, बिना साइन-अप, और पूरी तरह क्लाइंट-साइड। आपके प्रयोग कभी भी ब्राउज़र टैब से बाहर नहीं जाते।
इसे साझा करें
संबंधित टूल
Email Signature Builder 30 टेम्पलेट में से एक प्रोफ़ेशनल HTML ईमेल सिग्नेचर डिज़ाइन करें, उसे कस्टमाइज़ करें और सेव करें। निःशुल्क
आइकन से PNG Bootstrap Icons, Font Awesome और अधिक को कस्टम PNG इमेज में बदलें — मुफ्त, आपके ब्राउज़र में। निःशुल्क
ऐप आइकन जेनरेटर App Store और Google Play के लिए एक पूर्ण, स्टोर-तैयार ऐप आइकन सेट जेनरेट करें — आपके logo से बने प्रीमियम gradient, mesh और पैटर्न background। निःशुल्क
फ़ेविकन जेनरेटर एक logo, font icon या monogram से एक पूर्ण favicon पैकेज बनाएं — favicon.ico, आधुनिक PNGs, Apple touch icon, PWA icons, एक web manifest और HTML snippet। निःशुल्क
CSS Box Shadow Generator offset, blur, spread, color, opacity और inset के लाइव स्लाइडर्स के साथ layered CSS box-shadows बनाएं — एक असली एलिमेंट पर प्रीव्यू करें और तुरंत कॉपी करने योग्य CSS पाएं। निःशुल्क
CSS बॉर्डर रेडियस जेनरेटर लाइव पूर्वावलोकन के साथ CSS border-radius को दृश्यात्मक रूप से बनाएँ और उत्पादन-तैयार कोड कॉपी करें। निःशुल्क
लोकप्रिय खोजें
flexbox प्लेग्राउंड css flexbox जेनरेटर flex कंटेनर जेनरेटर justify-content align-items टूल css flex लेआउट जेनरेटर flexbox विज़ुअलाइज़र flexbox कोड जेनरेटर
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।
समस्या की रिपोर्ट करें

इस मुफ़्त टूल को अपनी वेबसाइट पर जोड़ें — नीचे दिया गया कोड कॉपी और पेस्ट करें।