↔️

मोफत CSS Flexbox जनरेटर

लाइव्ह आयटमवर flex direction, wrap, justify आणि align सह प्रयोग करा — आणि CSS कॉपी करा.

तुमच्या ब्राउझरमध्ये चालतेसाइन-अप नाही, पॉप-अप नाहीलॉगिन आवश्यक नाहीकायमचे विनामूल्य

एकदा लोड झाल्यावर ऑफलाइन काम करते

एक दृश्य flexbox प्लेग्राउंड: direction, wrap, justify-content, align-items आणि gap सेट करा, आयटम्सची संख्या बदला, आणि एखाद्या आयटमला flex-grow देण्यासाठी त्यावर क्लिक करा. CSS लाइव्ह अपडेट होते, कॉपी करण्यासाठी तयार.

प्रीसेट्स

flex-direction

flex-wrap

justify-content

align-items

गॅप: 12pxआयटम्स: 4पूर्वावलोकन उंची: 176px

टीप: प्रीव्ह्यूमधील एखाद्या आयटमवर क्लिक करून त्यावर flex-grow: 1 टॉगल करा.

लाइव्ह प्रीव्ह्यू

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 सर्वकाही तुमच्या ब्राउझरमध्येच चालते — काहीही अपलोड होत नाही.

हे कसे कार्य करते

एक interactive flexbox playground: flex-direction, wrap, justify-content, आणि align-items सेलगा आणि 10 पर्यंत लाइव्ह आयटम्स तात्काळ पुन्हा मांडताना पहा. कोणत्याही आयटमला flex-grow: 1 देण्यासाठी क्लिक करा आणि तो जागा कशी घेतो ते पहा. CSS लाइव्ह अपडेट होतो, तुमच्या प्रोजेक्टमध्ये कॉपी करण्यास तयार.

1
container सेट करा
दिशा, wrap, justify-content, align-items, gap.
2
आयटम्स जोडा
एक ते दहा क्रमांकित flex आयटम्स.
3
प्रयोग करा
flex-grow टॉगल करण्यासाठी व परिणाम पाहण्यासाठी कोणताही आयटम क्लिक करा.
4
CSS कॉपी करा
container (व आयटम) नियम, पेस्ट करण्यास तयार.

सर्वकाही तुमच्या ब्राउझरमध्ये चालते — काहीही अपलोड होत नाही.

मोफत CSS Flexbox जनरेटर

हे कसे कार्य करते

संबंधित साधने

CSS ग्रिड जनरेटर

CSS बॉक्स शॅडो जनरेटर

CSS बॉर्डर रेडियस जनरेटर

वारंवार विचारले जाणारे प्रश्न