इस उपकरण के बारे में
CSS Flexbox जनरेटर कंटेनर के लिए आधुनिक मानक Flexbox घोषणाएँ बनाता है। प्रीव्यू में क्रमांक वाले कई आइटम हैं। प्रॉपर्टी बदलते ही कंटेनर अपडेट होता है, जिससे अलग-अलग संरेखण की तुलना आसान होती है।
कैसे इस्तेमाल करें
- मुख्य अक्ष की दिशा चुनने के लिए flex-direction सेट करें।
- justify-content और align-items चुनें।
- flex-wrap और gap की दूरी सेट करें।
- प्रीव्यू में आइटम की स्थिति देखकर .container CSS कॉपी करें।
उदाहरण
- row + center से आइटम क्षैतिज दिशा में बीच में आ सकते हैं।
- column मुख्य अक्ष को ऊर्ध्वाधर दिशा में बदलता है।
- wrap जगह कम होने पर नई लाइन की अनुमति देता है; nowrap सभी आइटम एक लाइन में रखता है।
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}कार्यविधि और CSS विवरण
justify-content मुख्य अक्ष पर वितरण और align-items आड़े अक्ष पर संरेखण नियंत्रित करता है। row में मुख्य अक्ष सामान्यतः क्षैतिज होता है; column में वह ऊर्ध्वाधर हो जाता है। flex-wrap तय करता है कि जगह कम होने पर नई लाइन बनेगी या नहीं। gap पास-पास के आइटम या लाइनों के बीच दूरी देता है।
सामान्य उपयोग
- नेविगेशन, बटन समूह और कार्ड की कतारें बनाना।
- मुख्य और आड़े अक्ष को समझना।
- space-between, space-around और space-evenly की तुलना करना।
गोपनीयता
आपका इनपुट और परिणाम केवल आपके ब्राउज़र में संसाधित होते हैं; उन्हें अपलोड या अपने आप सेव नहीं किया जाता। जिन परिणामों को रखना हो, उन्हें कॉपी करके संभालकर रखें।
FAQ
justify-content और align-items में क्या अंतर है?
पहला मुख्य अक्ष पर वितरण नियंत्रित करता है, दूसरा आड़े अक्ष पर संरेखण। इन्हें हमेशा क्षैतिज या ऊर्ध्वाधर मानना सही नहीं है।
flex-direction बदलने पर मुख्य अक्ष कैसे बदलता है?
row पंक्ति की दिशा और column स्तंभ की दिशा इस्तेमाल करता है। reverse वाले विकल्प संबंधित मुख्य अक्ष का क्रम उलट देते हैं।
flex-wrap कब इस्तेमाल करें?
जब आइटम को एक लाइन में सिकोड़ना न चाहें और कंटेनर में कई लाइनें रखने की अनुमति हो, तब wrap चुनें।
क्या Flexbox में gap इस्तेमाल कर सकते हैं?
हाँ। यह आइटम और लाइनों के बीच दूरी तय करता है। आउटपुट में मानक gap प्रॉपर्टी इस्तेमाल होती है।