CSS Flexbox
पेज कंपोनेंट्स ने शेल, बार, मेनू और गैलरी स्केच किए। Flexbox एक दिशा में आइटम सजाने का आधुनिक तरीका है — पंक्ति या कॉलम — कम float झंझट के साथ। display: flex चालू करें, flex items से मिलें, फिर अगले Flexbox पाठों में गहराई में जाएँ।
Flexbox स्टार्टर टूलकिट
📊 Flexbox एक नज़र में
| विचार | रोजमर्रा का काम |
|---|---|
| Flex कंटेनर | display: flex (या inline-flex) वाला पैरेंट |
| Flex आइटम | सीधे बच्चे जो flex लेआउट में भाग लेते हैं |
| मुख्य अक्ष | आइटम जिस प्राथमिक दिशा में चलते हैं (डिफ़ॉल्ट पंक्ति) |
| क्रॉस अक्ष | संरेखण के लिए लंबवत दिशा |
gap |
आइटम के बीच बिल्ट-इन जगह |
| अगले पाठ | कंटेनर प्रॉप्स, आइटम प्रॉप्स, रेस्पॉन्सिव flex पैटर्न |
Flexbox एक आयाम में सबसे मज़बूत है। पूरे द्विआयामी पेज ग्रिड के लिए Grid मॉड्यूल इस Flexbox ट्रैक के बाद आता है।
flex कंटेनर चालू करें
पैरेंट पर display: flex लगाएँ। बच्चे flex items बन जाते हैं और डिफ़ॉल्ट रूप से एक पंक्ति में बैठते हैं।
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
margin की लड़ाई के बजाय gap
gap बिना collapse ट्रिक्स के आइटम के बीच जगह देता है। flex बच्चों के बीच समान गटर के लिए इसे प्राथमिकता दें।
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
मुख्य अक्ष पर आइटम अलग धकेलें
justify-content मुख्य अक्ष पर खाली जगह बाँटता है। space-between क्लासिक हेडर पैटर्न है: ब्रांड बाएँ, एक्शन दाएँ।
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
क्रॉस अक्ष पर केंद्र — और दोनों पर
align-items: center क्रॉस अक्ष पर आइटम संरेखित करता है। justify के साथ जोड़कर बॉक्स के अंदर शांत केंद्रित क्लस्टर बनाएँ।
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
जब पंक्ति में जगह खत्म हो तो wrap करें
flex-wrap: wrap आइटम को अगली पंक्ति में गिरने देता है — गैलरी में आपने इसकी झलक देखी। Flex Responsive पाठ आगे जाएगा।
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
एक शांत Flexbox आदत
एक-आयामी पंक्तियों और कॉलम के लिए Flexbox इस्तेमाल करें: नेव, टूलबार, कार्ड पंक्तियाँ, सेंटरिंग। अगले में कंटेनर विवरण, फिर आइटम वृद्धि/संकुचन, फिर रेस्पॉन्सिव flex। यह न सोचें कि अकेला Flexbox हर Grid लेआउट की जगह ले लेगा।
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
खुद आज़माएँ
display: flexऔर तीन बटन वाला.toolbarबनाएँ।gapऔरalign-items: centerजोड़ें।justify-content: space-betweenवाला हेडर बनाएँ।- justify + align से बॉक्स में बटन जोड़ी केंद्रित करें।
- लिखें कि अगला कौन-सा पाठ
flex-grow/flex-basisविचारों को कवर करेगा।
आम गलतियाँ
- बिना लेआउट लक्ष्य हर रैपर पर
display: flexछिड़कना - Flexbox से पूरे 2D Grid जैसा व्यवहार उम्मीद करना
gapकी जगह यादृच्छिक margin से दूरी लड़ना- अगले पाठ छोड़कर सिर्फ इस परिचय को रटना
- जब flex पंक्ति साफ़ हो तब भी हमेशा float पंक्तियों पर रहना
सारांश
- Flexbox आइटम को एक मुख्य अक्ष पर व्यवस्थित करता है
display: flexकंटेनर बनाता है; बच्चे flex items हैंgap,justify-contentऔरalign-itemsरोजमर्रा की पंक्तियाँ खोलते हैं- Wrap रेस्पॉन्सिव पंक्तियों की झलक है; और बाद में आता है
- कंटेनर, आइटम और रेस्पॉन्सिव Flexbox पाठ अगले में मॉडल को गहरा करते हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी