CSS Flex कंटेनर
Flexbox परिचय ने पैरेंट को कंटेनर बना दिया। यह पाठ कंटेनर पर रहता है: मुख्य अक्ष चुनें, जगह बाँटें, क्रॉस अक्ष पर अलाइन करें, और लाइनों को wrap करें। आइटम ग्रोथ (flex-grow, flex-basis) Flex Items पाठ का इंतज़ार करती है।
एक flex कंटेनर टूलकिट
📊 Flex कंटेनर एक नज़र में
| प्रॉपर्टी | रोज़ का काम |
|---|---|
flex-direction |
मुख्य अक्ष सेट करता है: row, column, या reverse वेरिएंट |
justify-content |
मुख्य अक्ष पर आइटम बाँटता है |
align-items |
क्रॉस अक्ष पर आइटम अलाइन करता है (एक लाइन) |
flex-wrap |
आइटम को नई लाइनों पर wrap होने देता है |
align-content |
कई flex लाइनों को क्रॉस अक्ष पर पैक करता है |
gap |
आइटम (और लाइनों) के बीच जगह देता है बिना margin झगड़े |
याद रखें: justify मुख्य अक्ष पर चलता है; align क्रॉस अक्ष पर। flex-direction को column करें तो ये भूमिकाएँ अक्षों के साथ घूम जाती हैं।
flex-direction — मुख्य अक्ष चुनें
डिफ़ॉल्ट row है। साइड नव या फॉर्म ग्रुप जैसी ऊर्ध्वाधर स्टैक के लिए column इस्तेमाल करें। Reverse वेरिएंट दृश्य क्रम पलटते हैं — पढ़ने का क्रम समझदार रहे, जाँचें।
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
justify-content — मुख्य-अक्ष वितरण
मुख्य अक्ष पर खाली जगह बाँटें: flex-start, center, flex-end, space-between, space-around, space-evenly। हेडर अक्सर space-between चाहते हैं।
.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}
align-items — क्रॉस-अक्ष अलाइनमेंट
एक लाइन पर, align-items रो में ऊँचाई/ऊर्ध्वाधर स्थान (या कॉलम में क्षैतिज) नियंत्रित करता है। stretch डिफ़ॉल्ट है; center रोज़मर्रा का UI गोंद।
.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
Wrap और align-content
flex-wrap: wrap के साथ अतिरिक्त आइटम नई लाइनें बनाते हैं। align-content उन लाइनों को पैक करता है जब क्रॉस अक्ष पर खाली जगह हो — wrap nowrap हो तो कम असर।
.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}
एक शांत कंटेनर आदत
पहले direction, फिर justify, फिर align-items, ज़रूरत हो तो wrap। गटर के लिए gap रखें। प्रति-आइटम ग्रोथ अगले पाठ के लिए बचाएँ — और 2D पेज ग्रिड बाद में CSS Grid को छोड़ें।
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
खुद आज़माएँ
flex-direction: columnऔर तीन ब्लॉकों वाला.stackबनाएँ।- चौड़ी बार पर
justify-content: space-betweenबनामcenterतुलना करें। min-heightबढ़ाएँ औरalign-items: stretchबनामcenterआज़माएँ।- चिप्स wrap करें और
align-content: flex-startदेखें। - एक वाक्य लिखें: अगली बार कौन-सी प्रॉपर्टीज़ आइटम पर हैं, कंटेनर पर नहीं?
आम गलतियाँ
- दिशा बदलने के बाद justify और align मानसिक रूप से अदल-बदल
- कीबोर्ड/पढ़ने का क्रम जाँचे बिना
row-reverse nowrapके साथalign-contentसे उम्मीद रखना- आइटम की जगह कंटेनर पर
flex-growलगाना - Flexbox कंटेनर प्रॉप्स से पूरा 2D Grid लेआउट माँगना
सारांश
- कंटेनर प्रॉप्स दिशा, वितरण, अलाइनमेंट और wrap चलाते हैं
flex-directionमुख्य अक्ष परिभाषित करता हैjustify-contentबनामalign-itemsमुख्य बनाम क्रॉस का पालन करते हैं- Wrap बहु-लाइन पैक सक्षम करता है;
align-contentउन लाइनों को पैक करता है - आइटम-स्तर ग्रोथ Flex Items पाठ का इंतज़ार करती है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी