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

फ्लेक्स दिशाको साथ प्रयोग गर्नुहोस्, लपेट्नुहोस्, औचित्य दिनुहोस्, र पङ्क्तिबद्ध गर्नुहोस्। वस्तु लेआउट अपडेट लाइभ हेर्नुहोस्, त्यसपछि कन्टेनर CSS प्रतिलिपि गर्नुहोस्।

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

फ्लेक्स दिशा, र्‍याप, औचित्य र पङ्क्तिबद्ध गर्ने प्रयोग गर्नुहोस् — लेआउट अपडेट लाइभ हेर्नुहोस्।
तपाईको ब्राउजरमा चल्छ
प्रयोग गर्न नि: शुल्क

कसरी प्रयोग गर्ने

फ्लेक्स-दिशा सेट गर्नुहोस् र लपेट्नुहोस्।
औचित्य-सामग्री र पङ्क्तिबद्ध-वस्तुहरू समायोजन गर्नुहोस्।
Flexbox CSS प्रतिलिपि गर्नुहोस्।

How this tool works

फ्लेक्स-दिशा सेट गर्नुहोस् र लपेट्नुहोस्।
औचित्य-सामग्री र पङ्क्तिबद्ध-वस्तुहरू समायोजन गर्नुहोस्।
Flexbox CSS प्रतिलिपि गर्नुहोस्।

Recommended settings

पहिले पूर्वनिर्धारित विकल्पहरू प्रयोग गर्नुहोस्, त्यसपछि आवश्यक भए समायोजन गर्नुहोस्

Supported formats

Text / on-page input

File size and limits

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

Privacy

रङ र CSS जेनरेटरहरू तपाईंको ब्राउजरमा पूर्ण रूपमा चल्छन्। पूर्वावलोकन र रूपान्तरणले तपाईंको शैलीहरू कहिल्यै अपलोड गर्दैन।

Common use cases

तपाईलाई आवश्यक परेको बेला फ्लेक्सबक्स जेनरेटर प्रयोग गर्नुहोस्: फ्लेक्स दिशाको साथ प्रयोग गर्नुहोस्, र्‍याप गर्नुहोस्, औचित्य दिनुहोस्, र पङ्क्तिबद्ध गर्नुहोस् — लेआउट अपडेट लाइभ हेर्नुहोस्।

Troubleshooting

पेस्ट गरेपछि पूर्वावलोकन फरक देखिन्छ

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

बारम्बार सोधिने प्रश्नहरू

के यसले मेरो CSS अपलोड गर्छ?

होइन। जेनेरेटर र कन्भर्टरहरू तपाईंको ब्राउजरमा लाइभ पूर्वावलोकनको साथ चल्छन्।

के मलाई खाता चाहिन्छ?

होइन। उपकरण खोल्नुहोस्, नियन्त्रणहरू ट्वीक गर्नुहोस्, र CSS प्रतिलिपि गर्नुहोस्।