CSS फ़्लेक्सबॉक्स जनरेटर
फ़्लेक्सबॉक्स लेआउट विज़ुअली बनाएँ: डायरेक्शन, रैप, justify-content, align-items, gap और हर आइटम का ग्रो। हेडर, साइडबार और कार्ड ग्रिड के प्रीसेट। CSS, SCSS, Tailwind।
CSS फ़्लेक्सबॉक्स जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
CSS फ़्लेक्सबॉक्स जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर CSS फ़्लेक्सबॉक्स जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
फ़्लेक्सबॉक्स आइटम को पंक्ति या कॉलम में सजाने वाला CSS लेआउट सिस्टम है: नेविगेशन बार, बटन ग्रुप, कार्ड, बीच में रखा कंटेंट। इसकी प्रॉपर्टीज़ ताकतवर हैं पर आसानी से गड़बड़ा जाती हैं।
यह फ़्लेक्सबॉक्स जनरेटर आपको बटन से इन्हें बदलने, लाइव बॉक्स पर नतीजा देखने और फिर कोड कॉपी करने देता है।
फ़्लेक्स लेआउट कैसे बनाएँ
- किसी प्रीसेट से शुरू करें: हॉरिज़ॉन्टल, वर्टिकल, सेंटर, space between, space around, space evenly, ग्रिड, हेडर, साइडबार या कार्ड ग्रिड।
- कंटेनर सेट करें: flex-direction, flex-wrap, justify-content, align-items, align-content और gap।
- आइटम जोड़ें या हटाएँ और हर एक का flex-grow और साइज़ बदलें।
- CSS, SCSS या Tailwind क्लास कॉपी करें।
फ़्लेक्सबॉक्स चीट शीट
| प्रॉपर्टी | यह क्या करती है |
|---|---|
| flex-direction | मुख्य अक्ष: row (क्षैतिज) या column (ऊर्ध्वाधर) |
| justify-content | मुख्य अक्ष पर दूरी: start, center, end, between, around, evenly |
| align-items | दूसरे अक्ष पर संरेखण: stretch, start, center, end, baseline |
| flex-wrap | जगह ख़त्म होने पर आइटम नई लाइन में जाएँ या नहीं |
| gap | आइटम के बीच की जगह |
| flex-grow | ख़ाली जगह भरने के लिए आइटम कितना फैले |
आम नुस्खे
- कुछ भी बीच में रखें: display: flex; justify-content: center; align-items: center।
- बाईं ओर लोगो, दाईं ओर मेन्यू: हेडर पर justify-content: space-between।
- साइडबार लेआउट: तय चौड़ाई वाला साइडबार और flex-grow: 1 वाला मुख्य हिस्सा।
- रैप होने वाले कार्ड: gap और कार्ड की न्यूनतम चौड़ाई के साथ flex-wrap: wrap।
फ़्लेक्सबॉक्स या ग्रिड?
एक बार में एक दिशा के लिए फ़्लेक्सबॉक्स इस्तेमाल करें, जैसे बटन की पंक्ति या फ़ील्ड का कॉलम। जिन दो आयामी लेआउट में पंक्तियाँ और कॉलम मेल खाने चाहिए, उनके लिए CSS ग्रिड इस्तेमाल करें। कई पेज दोनों को मिलाते हैं।
पेज ग्रिड के लिए ग्रिड सिस्टम जनरेटर देखें; बॉक्स को स्टाइल करने के लिए बॉर्डर रेडियस और बॉक्स शैडो जनरेटर।
अक्सर पूछे जाने वाले सवाल
फ़्लेक्सबॉक्स से div को बीच में कैसे रखें?
पैरेंट पर display: flex, justify-content: center और align-items: center सेट करें। ऊँची जगह में वर्टिकल सेंटरिंग चाहिए तो पैरेंट को ऊँचाई दें।
justify-content और align-items में क्या फ़र्क है?
justify-content आइटम को मुख्य अक्ष पर सजाता है (पंक्ति में क्षैतिज), align-items उन्हें उसके आर-पार संरेखित करता है (पंक्ति में ऊर्ध्वाधर)।
ग्रिड की जगह फ़्लेक्सबॉक्स कब इस्तेमाल करें?
नेवबार और बटन ग्रुप जैसे एक दिशा वाले लेआउट के लिए फ़्लेक्सबॉक्स; पंक्तियों और कॉलम वाले दो आयामी लेआउट के लिए ग्रिड।
क्या Tailwind क्लास मिल सकती हैं?
हाँ। Tailwind एक्सपोर्ट चुनें और flex, justify-between और gap-4 जैसी यूटिलिटी क्लास पाएँ।
आइटम को अगली लाइन में कैसे भेजें?
कंटेनर पर flex-wrap: wrap सेट करें। जगह ख़त्म होने पर आइटम नई लाइन में चले जाते हैं।
flex-grow क्या करता है?
यह आइटम को बची हुई ख़ाली जगह लेने देता है। flex-grow: 1 वाला आइटम फैलता है, जबकि 0 वाले आइटम अपना साइज़ बनाए रखते हैं।