इस उपकरण का उपयोग करके मैं flexbox से एक div को कैसे केंद्रित करूँ?

बिल्कुल बीच में प्रीसेट चुनें, जो कंटेनर पर justify-content: center और align-items: center सेट करता है। फिर CSS कॉपी करें दबाएँ और इसे अपनी स्टाइलशीट में पेस्ट करें।

मैं कौन से flexbox गुण बदल सकता हूँ?

आप flex-direction, flex-wrap, justify-content, align-items, align-content और Gap सेट कर सकते हैं। आप आइटम की संख्या 1 से 10 तक और पूर्वावलोकन की ऊंचाई भी बदल सकते हैं।

मैं कैसे देखूँ कि flex-grow एक आइटम पर कैसे काम करता है?

लाइव पूर्वावलोकन में किसी आइटम पर क्लिक करके उस पर flex-grow: 1 टॉगल करें, और इसे हटाने के लिए फिर से क्लिक करें। जेनरेट किए गए CSS में तब उस आइटम के लिए एक .item:nth-child नियम शामिल होता है।

क्या नेवबार या कार्ड पंक्ति जैसे शुरुआती प्रीसेट हैं?

हाँ। प्रीसेट हैं नेवबार, बिल्कुल बीच में, साइडबार लेआउट और रैप होती कार्ड पंक्ति। प्रत्येक मानों का एक सेट लोड करता है जिसे आप बाद में समायोजित कर सकते हैं।

पूर्वावलोकन में align-content कुछ नहीं करता क्यों दिखता है?

align-content केवल तब प्रभावी होता है जब आइटम कई पंक्तियों में रैप होते हैं। पूर्वावलोकन में यह केवल तभी लागू होता है जब wrap, nowrap न हो, इसलिए पहले flex-wrap को wrap पर सेट करें।

क्या यह सच में मुफ़्त है?

हाँ। हर टूल मुफ़्त है, बिना किसी खाते या क्रेडिट कार्ड के। काम हमारे सर्वर के बजाय आपके डिवाइस पर होता है, जिससे इसे चलाना मुफ़्त रहता है।

क्या यह मोबाइल पर काम करता है?

हाँ। यह iOS और Android के मौजूदा मोबाइल ब्राउज़र में चलता है, कुछ इंस्टॉल करने की ज़रूरत नहीं।

↔️

मुफ़्त CSS Flexbox जनरेटर

लाइव आइटम पर flex दिशा, wrap, justify और align के साथ प्रयोग करें — और CSS कॉपी करें।

आपके ब्राउज़र में चलता हैकोई साइन-अप नहीं, कोई पॉप-अप नहींकोई लॉगिन आवश्यक नहींहमेशा के लिए मुफ़्त

लोड होने के बाद ऑफ़लाइन काम करता है

एक विज़ुअल flexbox प्लेग्राउंड: दिशा, 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>

🔒 सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं किया जाता।

यह कैसे काम करता है

एक इंटरैक्टिव flexbox प्लेग्राउंड: flex-direction, wrap, justify-content, और align-items बदलें और 10 तक लाइव आइटम तुरंत फिर से व्यवस्थित होते देखें। किसी आइटम को flex-grow: 1 देने के लिए उस पर क्लिक करें और देखें यह कैसे जगह लेता है। CSS लाइव अपडेट होता है, आपके प्रोजेक्ट में कॉपी करने के लिए तैयार।

1
कंटेनर सेट करें
Direction, wrap, justify-content, align-items, gap।
2
आइटम जोड़ें
एक से दस नंबर वाले flex आइटम।
3
प्रयोग करें
flex-grow टॉगल करने और प्रभाव देखने के लिए किसी आइटम पर क्लिक करें।
4
CSS कॉपी करें
कंटेनर (और आइटम) नियम, पेस्ट करने के लिए तैयार।

सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।

मुफ़्त CSS Flexbox जनरेटर

यह कैसे काम करता है

संबंधित टूल

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

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

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

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