फ्लेक्सबॉक्स जेनरेटर

फ्लेक्स दिशा, रैप, जस्टिफ़ाई और संरेखित के साथ प्रयोग करें। आइटम लेआउट अपडेट को लाइव देखें, फिर कंटेनर सीएसएस को कॉपी करें।

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

फ्लेक्स डायरेक्शन, रैप, जस्टिफाई और अलाइन के साथ प्रयोग करें - लेआउट अपडेट को लाइव देखें।
आपके ब्राउज़र में चलता है
उपयोग करने के लिए निःशुल्क

कैसे उपयोग करें

फ्लेक्स-दिशा और रैप सेट करें।
औचित्य-सामग्री को समायोजित करें और आइटम को संरेखित करें।
फ्लेक्सबॉक्स सीएसएस की प्रतिलिपि बनाएँ।

How this tool works

फ्लेक्स-दिशा और रैप सेट करें।
औचित्य-सामग्री को समायोजित करें और आइटम को संरेखित करें।
फ्लेक्सबॉक्स सीएसएस की प्रतिलिपि बनाएँ।

Recommended settings

पहले डिफ़ॉल्ट विकल्पों का उपयोग करें, फिर यदि आवश्यक हो तो समायोजित करें

Supported formats

Text / on-page input

File size and limits

पुराने फ़ोन पर बहुत जटिल मल्टी-लेयर पूर्वावलोकन धीमा लग सकता है।

Privacy

रंग और सीएसएस जनरेटर पूरी तरह से आपके ब्राउज़र में चलते हैं। पूर्वावलोकन और रूपांतरण कभी भी आपकी शैलियाँ अपलोड नहीं करते हैं।

Common use cases

जब भी आपको आवश्यकता हो फ्लेक्सबॉक्स जेनरेटर का उपयोग करें: फ्लेक्स दिशा, रैप, जस्टिफाई और अलाइन के साथ प्रयोग करें - लेआउट अपडेट को लाइव देखें।

Troubleshooting

पेस्ट करने के बाद पूर्वावलोकन अलग दिखता है

अपने पृष्ठ पर प्रतिस्पर्धी सीएसएस की जांच करें (रीसेट, विरासत में मिले रंग)। पहले जेनरेट किए गए नियम को एक अलग स्टाइलशीट में कॉपी करें।

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

क्या यह मेरा सीएसएस अपलोड करता है?

नहीं, जेनरेटर और कन्वर्टर आपके ब्राउज़र में लाइव पूर्वावलोकन के साथ चलते हैं।

क्या मुझे एक खाते की आवश्यकता है?

नहीं, टूल खोलें, नियंत्रणों में बदलाव करें और सीएसएस की प्रतिलिपि बनाएँ।