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

flex-direction, wrap, justify-content, align-items, gap और हर आइटम के flex, order व align-self विज़ुअली सेट करें, लाइव चाइल्ड और कॉपी करने लायक CSS के साथ।

कंटेनर

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content का असर तभी होता है जब आइटम कई पंक्तियों में रैप हों।

आइटम की संख्या

आइटम 1

यहाँ आइटम चुनें या प्रीव्यू में उस पर क्लिक करें।

flex-grow

flex-shrink

order

flex-basis

align-self

प्रीव्यू

कंटेनर का आकार बदलने के लिए प्रीव्यू का निचला कोना खींचें।

CSS कोड

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

CSS फ़्लेक्सबॉक्स जेनरेटर क्या है?

यह इंटरैक्टिव फ़्लेक्सबॉक्स प्लेग्राउंड है: कंटेनर की प्रॉपर्टी सेट करें, 12 तक चाइल्ड आइटम जोड़ें और हर आइटम के flex-grow, flex-shrink, flex-basis, order और align-self ट्यून करें। प्रीव्यू ठीक वही CSS लागू करता है जो जेनरेट होता है।

CSS फ़्लेक्सबॉक्स जेनरेटर का उपयोग कैसे करें

कंटेनर सेट करें: flex-direction, flex-wrap, justify-content, align-items, align-content और gap।
प्रीव्यू में दिखने वाले आइटम की संख्या (Number of items) चुनें।
कोई आइटम चुनें (बटन या प्रीव्यू में क्लिक करके) और flex-grow, flex-shrink, flex-basis, order और align-self सेट करें।
लेआउट की प्रतिक्रिया देखने के लिए प्रीव्यू का कोना खींचकर उसका आकार बदलें।
.container और .item-n नियमों के लिए CSS कोड कॉपी करें।

उदाहरण

इनपुट

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

आउटपुट

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

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

CSS फ़्लेक्सबॉक्स जेनरेटर का उपयोग कब करें

फ़्लेक्सबॉक्स एक-आयामी लेआउट के लिए इस्तेमाल करें: नेविगेशन बार, टूलबार, बटन ग्रुप, मीडिया ऑब्जेक्ट और सेंटरिंग। एक साथ पंक्तियों और कॉलम वाले द्वि-आयामी पेज लेआउट के लिए आमतौर पर CSS Grid Generator बेहतर टूल है।

CSS फ़्लेक्सबॉक्स जेनरेटर कैसे काम करता है

कंटेनर को हमेशा display: flex के साथ direction, wrap, justify-content और align-items मिलते हैं। align-content तभी लिखा जाता है जब आइटम रैप हो सकें (एक लाइन पर इसका असर नहीं होता), और gap तभी जब वह 0 से ऊपर हो। आइटम के लिए सिर्फ़ डिफ़ॉल्ट से अलग वैल्यू लिखी जाती हैं: flex: grow shrink basis जब वह 0 1 auto न हो, order जब 0 न हो और align-self जब auto न हो, .item-1, .item-2… नाम के नियमों में। अमान्य flex-basis को चिह्नित करके अनदेखा किया जाता है।

सामान्य उपयोग मामले

कंटेंट को क्षैतिज और ऊर्ध्वाधर रूप से केंद्र में रखना
दाईं ओर धकेले गए आइटम वाले नेविगेशन बार
flex: 1 से समान चौड़ाई वाले कॉलम
रैप होने वाली टैग या कार्ड सूचियाँ
order से आइटम का दृश्य क्रम बदलना

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

मेरे CSS में align-content क्यों नहीं है?

align-content सिर्फ़ रैप होने वाले फ़्लेक्स कंटेनर की लाइनों को बाँटता है। flex-wrap: nowrap के साथ सिर्फ़ एक लाइन होती है, इसलिए टूल इसे छोड़ देता है।

flex: 1 1 auto का क्या मतलब है?

आइटम अपने स्वचालित आकार से बढ़ सकता है (1) और घट सकता है (1)। flex-grow तय करता है कि अतिरिक्त जगह आइटम में कैसे बँटे।

क्या order एक्सेसिबिलिटी को प्रभावित करता है?

order सिर्फ़ दृश्य क्रम बदलता है। स्क्रीन रीडर और कीबोर्ड फ़ोकस अब भी HTML स्रोत क्रम का पालन करते हैं, इसलिए सार्थक पुनर्क्रमण के लिए इसका उपयोग न करें।