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

फ्लेक्स दिशा, लपेटणे, न्याय्य ठरवणे आणि संरेखित करणे सह प्रयोग करा. आयटम लेआउटचे अपडेट लाइव्ह पहा, नंतर कंटेनर 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

फ्लेक्स दिशा, गुंडाळणे, न्याय्य ठरविणे आणि संरेखित करण्याचा प्रयोग करा — लेआउटचे अद्यतन थेट पहा.
तुमच्या ब्राउझरमध्ये चालते
वापरण्यासाठी मोफत

How to use

फ्लेक्स-दिशा आणि लपेटणे सेट करा.
औचित्य-सामग्री आणि संरेखित-आयटम समायोजित करा.
फ्लेक्सबॉक्स CSS कॉपी करा.

How this tool works

फ्लेक्स-दिशा आणि लपेटणे सेट करा.
औचित्य-सामग्री आणि संरेखित-आयटम समायोजित करा.
फ्लेक्सबॉक्स CSS कॉपी करा.

Recommended settings

प्रथम डीफॉल्ट पर्याय वापरा, नंतर आवश्यक असल्यास समायोजित करा

Supported formats

Text / on-page input

File size and limits

जुन्या फोनवर खूप जटिल मल्टी-लेयर पूर्वावलोकने हळू वाटू शकतात.

Privacy

रंग आणि CSS जनरेटर पूर्णपणे तुमच्या ब्राउझरमध्ये चालतात. पूर्वावलोकने आणि रूपांतरणे कधीही तुमच्या शैली अपलोड करत नाहीत.

Common use cases

आपल्याला आवश्यक असेल तेव्हा फ्लेक्सबॉक्स जनरेटर वापरा: फ्लेक्स दिशा, गुंडाळणे, न्याय्य ठरविणे आणि संरेखित करण्याचा प्रयोग करा — लेआउट अद्यतने थेट पहा.

Troubleshooting

पेस्ट केल्यानंतर पूर्वावलोकन वेगळे दिसते

तुमच्या पृष्ठावर प्रतिस्पर्धी CSS तपासा (रीसेट, वारसा मिळालेले रंग). व्युत्पन्न केलेला नियम प्रथम एका वेगळ्या स्टाईलशीटमध्ये कॉपी करा.

FAQ

हे माझे CSS अपलोड करते का?

नाही. जनरेटर आणि कन्व्हर्टर तुमच्या ब्राउझरमध्ये थेट पूर्वावलोकनासह चालतात.

मला खाते हवे आहे का?

नाही. टूल उघडा, नियंत्रणे सुधारा आणि CSS कॉपी करा.