CSS Flexbox जनरेटर
CSS Flexbox Generator से आप container पर flex-direction, justify-content, align-items, flex-wrap, align-content और gap सेट कर सकते हैं, 20 तक items का लाइव प्रीव्यू देख सकते हैं और बना हुआ CSS कॉपी कर सकते हैं।
इस टूल के बारे में
CSS Flexbox Generator से आप container पर flex-direction, justify-content, align-items, flex-wrap, align-content और gap सेट कर सकते हैं, 20 तक items का लाइव प्रीव्यू देख सकते हैं और बना हुआ CSS कॉपी कर सकते हैं।
इस्तेमाल कैसे करें
- direction और wrapping चुनें।
- justify-content और align-items सेट करें (और wrap हुई lines के लिए align-content)।
- gap और प्रीव्यू items की संख्या सेट करें।
- container rules इस्तेमाल करने के लिए Copy CSS पर क्लिक करें।
जानने योग्य बातें
- justify-content items को main axis पर align करता है; align-items उन्हें cross axis पर align करता है।
- flex-direction: column axes को बदल देता है, इसलिए तब justify-content vertical रूप से काम करता है।
- align-content का असर तभी होता है जब items कई lines में wrap हों।
- gap property सभी मौजूदा प्रमुख ब्राउज़रों में Flexbox के साथ काम करती है।
- Flexbox one-dimensional है; rows और columns दोनों एक साथ के लिए CSS Grid इस्तेमाल करें।
पूरी तरह आपके ब्राउज़र में चलता है — आप जो भी डालते हैं, वह न अपलोड होता है न सेव।
अक्सर पूछे जाने वाले सवाल
Flexbox से div को center कैसे करें?
parent पर display: flex; justify-content: center; align-items: center; सेट करें — child horizontal और vertical दोनों तरह से center हो जाएगा।
justify-content और align-items में क्या फ़र्क है?
justify-content items को main axis (डिफ़ॉल्ट रूप से row) पर बाँटता है; align-items उन्हें cross axis पर रखता है।
Grid की जगह Flexbox कब इस्तेमाल करें?
navigation bars और button rows जैसे one-dimensional layouts के लिए Flexbox, और two-dimensional page layouts के लिए Grid इस्तेमाल करें।
align-content कुछ क्यों नहीं करता?
align-content तभी लागू होता है जब flex-wrap items को एक से ज़्यादा lines में wrap होने देता है।