Developer Tools
Web UtilitiesCSS Flexbox प्लेग्राउंड
CSS flexbox कंटेनर और आइटम प्रॉपर्टीज़ को लाइव प्रीव्यू के साथ विज़ुअली कॉन्फ़िगर करें। flex-direction, justify-content, align-items और अन्य के लिए उपयोग-योग्य CSS कोड जेनरेट करें।
प्रीसेट
कंटेनर प्रॉपर्टीज़
आइटम प्रॉपर्टीज़
लाइव प्रीव्यू
1
2
3
कंटेनर CSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}आइटम CSS
.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 प्लेग्राउंड के बारे में
यह कैसे काम करता है
- कंटेनर प्रॉपर्टीज़ जैसे flex-direction, flex-wrap, justify-content, align-items और align-content एडजस्ट करें
- 6 तक flex आइटम जोड़ें और flex-grow, flex-shrink, flex-basis, align-self और order के साथ प्रत्येक को स्वतंत्र रूप से कॉन्फ़िगर करें
- कोई भी प्रॉपर्टी बदलने पर रियल टाइम में लेआउट देखें
- जेनरेट किया गया कंटेनर और आइटम CSS कोड सीधे अपने प्रोजेक्ट में कॉपी करें
- सामान्य flexbox पैटर्न को जल्दी एक्सप्लोर करने के लिए प्रीसेट का उपयोग करें
सामान्य उपयोग के मामले
- flexbox लेआउट प्रॉपर्टीज़ को इंटरेक्टिव रूप से सीखना
- नेविगेशन बार, कार्ड ग्रिड और साइडबार का प्रोटोटाइप बनाना
- जटिल flexbox अलाइनमेंट समस्याओं को डीबग करना
- सामान्य लेआउट पैटर्न के लिए बेस CSS जेनरेट करना
- छात्रों को CSS flexbox अवधारणाएं सिखाना
अक्सर पूछे जाने वाले प्रश्न
CSS Flexbox प्लेग्राउंड क्या है?
CSS Flexbox प्लेग्राउंड एक इंटरेक्टिव टूल है जो आपको सभी flexbox कंटेनर और आइटम प्रॉपर्टीज़ को विज़ुअली कॉन्फ़िगर करने देता है। बदलाव तुरंत लाइव प्रीव्यू में दिखते हैं और उपयोग-योग्य CSS कोड स्वचालित रूप से जेनरेट होता है।
कौन सी कंटेनर प्रॉपर्टीज़ कॉन्फ़िगर की जा सकती हैं?
आप सभी छह मुख्य flex कंटेनर प्रॉपर्टीज़ कॉन्फ़िगर कर सकते हैं: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around) और gap (पिक्सेल वैल्यू)।
प्रत्येक flex आइटम के लिए कौन सी प्रॉपर्टीज़ कॉन्फ़िगर की जा सकती हैं?
प्रत्येक flex आइटम को कॉन्फ़िगर किया जा सकता है: flex-grow (आइटम कितनी अतिरिक्त जगह लेता है), flex-shrink (जगह कम होने पर आइटम कितना सिकुड़ता है), flex-basis (प्रारंभिक आकार), align-self (व्यक्तिगत अलाइनमेंट ओवरराइड) और order (कंटेनर में विज़ुअल क्रम)।
कितने flex आइटम जोड़े जा सकते हैं?
आप अधिकतम 6 flex आइटम जोड़ सकते हैं। अधिक जोड़ने के लिए '+ आइटम जोड़ें' बटन पर क्लिक करें। प्रत्येक आइटम रंग-कोडेड है ताकि आप उसे प्रीव्यू और सेटिंग्स पैनल में आसानी से पहचान सकें।
किसी विशेष flex आइटम को कैसे चुनें और संपादित करें?
आइटम प्रॉपर्टीज़ पैनल के शीर्ष पर किसी भी नंबरयुक्त टैब पर क्लिक करके उसे चुनें। आप लाइव प्रीव्यू में सीधे किसी आइटम पर भी क्लिक कर सकते हैं। चुना गया आइटम रंगीन बॉर्डर से हाइलाइट होगा।
प्रीसेट क्या हैं और उनका उपयोग कैसे करें?
प्रीसेट सामान्य लेआउट पैटर्न के लिए तैयार flexbox कॉन्फ़िगरेशन हैं: 'सेंटर्ड रो' आइटम को क्षैतिज और ऊर्ध्वाधर केंद्र में रखता है, 'सेंटर्ड कॉलम' आइटम को ऊर्ध्वाधर रूप से स्टैक करता है, 'स्पेस बिटवीन' आइटम को समान रूप से वितरित करता है, 'रैपिंग ग्रिड' flex-wrap का उपयोग करता है, 'स्ट्रेच्ड आइटम' flex-grow का उपयोग करता है, 'रिवर्स्ड रो' डिस्प्ले ऑर्डर उलट देता है। तुरंत लागू करने के लिए प्रीसेट पर क्लिक करें।
flex-grow क्या करता है?
flex-grow परिभाषित करता है कि जब कंटेनर में अतिरिक्त जगह हो तो flex आइटम अन्य आइटम के सापेक्ष कितना बढ़ता है। 0 का मतलब आइटम नहीं बढ़ेगा। 1 का मतलब अतिरिक्त जगह का बराबर हिस्सा। 2 का मतलब flex-grow: 1 वाले आइटम से दोगुनी जगह।
flex-shrink क्या करता है?
flex-shrink परिभाषित करता है कि जब कंटेनर में पर्याप्त जगह न हो तो flex आइटम अन्य आइटम के सापेक्ष कितना सिकुड़ता है। 0 का मतलब सिकुड़ना नहीं। 1 (डिफ़ॉल्ट) का मतलब आनुपातिक सिकुड़ना। 2 का मतलब दोगुनी तेज़ी से सिकुड़ना।
flex-basis कौन सी वैल्यू स्वीकार कर सकता है?
flex-basis मुक्त जगह वितरित करने से पहले flex आइटम का प्रारंभिक आकार सेट करता है। स्वीकार करता है: 'auto' (आइटम की चौड़ाई या ऊंचाई), लंबाई वैल्यू जैसे '100px' या '20%', 'content' (सामग्री पर आधारित) या '0' (शून्य आकार से शुरू)।
align-items और align-self में क्या अंतर है?
align-items कंटेनर प्रॉपर्टी है जो डिफ़ॉल्ट रूप से सभी flex आइटम पर लागू होती है। align-self किसी एक आइटम के लिए align-items को ओवरराइड करती है। उदाहरण के लिए, यदि कंटेनर में align-items: center है लेकिन एक आइटम में align-self: flex-end है, तो उस एक को छोड़कर सभी आइटम केंद्र में होंगे।
order प्रॉपर्टी क्या करती है?
order प्रॉपर्टी DOM क्रम बदले बिना flex आइटम का विज़ुअल क्रम नियंत्रित करती है। कम order वैल्यू वाले आइटम पहले दिखते हैं। डिफ़ॉल्ट वैल्यू 0 है।
जेनरेट किया गया CSS कैसे कॉपी करें?
दो कॉपी बटन हैं: एक कंटेनर CSS के लिए और दूसरा सभी CSS के लिए। कोड क्लिपबोर्ड में कॉपी करने के लिए किसी भी 'CSS कॉपी करें' बटन पर क्लिक करें।