श्रेणी: डेवलपर टूल
CSS फ्लेक्सबॉक्स जनरेटर
फ्लेक्स कंटेनर को विज़ुअली बनाएँ और CSS कॉपी करें
असली फ्लेक्स आइटम से बने लाइव पूर्वावलोकन पर flex-direction, flex-wrap, justify-content, align-items और गैप सेट करें, फिर तैयार कंटेनर डिक्लेरेशन कॉपी करें। यहाँ कुछ भी आपके ब्राउज़र से बाहर नहीं जाता।
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
फ्लेक्सबॉक्स में पाँच गुण एक-दूसरे को प्रभावित करते हैं — दिशा बदलने से यह भी बदल जाता है कि wrap और justify-content के लिए "मुख्य अक्ष" का मतलब क्या है — इसीलिए बदलाव को देखना उसकी कल्पना करने से कहीं तेज़ है। यह टूल स्क्रीन पर एक असली फ्लेक्स कंटेनर बनाए रखता है जिसमें नंबर वाले आइटम होते हैं, ताकि हर विकल्प को स्पेक की मानसिक तस्वीर की बजाय बॉक्स की असली हरकत से परखा जाए।
इस्तेमाल कैसे करें
- flex-direction और flex-wrap सेट करें।
- justify-content और align-items चुनें, और गैप व आइटम की संख्या समायोजित करें।
- तैयार .container नियम अपनी स्टाइलशीट में कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या पूर्वावलोकन असली फ्लेक्स लेआउट है?
- हाँ। नंबर वाले बॉक्स ठीक उसी CSS से लेआउट होते हैं जो आप सेट कर रहे हैं, किसी तस्वीर से नहीं, इसलिए जो आप देखते हैं वही कॉपी किया गया नियम बनाता है।
- flex-direction बदलने से justify-content का काम क्यों बदल जाता है?
- justify-content हमेशा मुख्य अक्ष के साथ काम करता है, और flex-direction ही तय करता है कि मुख्य अक्ष क्षैतिज है या ऊर्ध्वाधर। column पर बदलने से "justify" लेफ़्ट/राइट से टॉप/बॉटम में बदल जाता है।
- क्या मेरे लेआउट के बारे में कुछ अपलोड होता है?
- नहीं। CSS आपके सेट किए गए कंट्रोल से पेज में ही बना टेक्स्ट है, और पूर्वावलोकन स्थानीय रूप से रेंडर होता है।