CSS रिस्पॉन्सिव Flex
Flex Items ने हर बच्चे का आकार तय किया। रिस्पॉन्सिव Flex अगला सवाल पूछता है: जब viewport सिकुड़ता है, तो वह flex पंक्ति wrap करे, स्टैक हो, या दिशा पलटे? कुछ शांत media-query पैटर्न सीखें — गहरी Responsive Design और Media Queries इकाइयाँ बाद में आती हैं।
रिस्पॉन्सिव flex टूलकिट
📊 रिस्पॉन्सिव flex एक नज़र में
| टूल | रोज़ का काम |
|---|---|
flex-wrap |
पंक्ति बहुत संकरी होने पर आइटम को नई पंक्ति पर ले जाता है |
flex-direction |
breakpoint पर row ↔ column पलटकर सेक्शन स्टैक करता है |
| Media query | नया flex नियम तभी लागू करता है जब viewport मेल खाए |
flex-basis / min-width |
बताता है कार्ड कब wrap हों या साथ-साथ रहें |
gap |
पंक्तियाँ wrap होने पर रिक्ति सही रखता है |
लेआउट के लिए order से बचें |
कीबोर्ड और स्क्रीन रीडर के लिए DOM क्रम सुरक्षित रखें |
पढ़ने योग्य डेस्कटॉप (या mobile-first) flex आधार से शुरू करें। एक स्पष्ट breakpoint पर सिर्फ वही बदलें जो बदलना ज़रूरी हो — wrap, दिशा, या basis — हर गुण एक साथ नहीं।
flex-wrap — पंक्ति को साँस लेने दें
जब कार्ड चौड़ी स्क्रीन पर पंक्ति में रहें और हमेशा कुचलने के बजाय wrap करें, wrap चालू करें और हर कार्ड को समझदार basis दें।
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}
breakpoint पर दिशा पलटना
क्लासिक पैटर्न: चौड़े viewport पर साथ-साथ, संकरे पर स्तंभ स्टैक। media query के अंदर flex-direction बदलें — वही HTML रखें।
.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}
@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}
reflow के लिए basis और min-width
wrap को flex-basis या min-width से जोड़ें ताकि आइटम तय करें कब गिरें। अगर कोई आकार कभी साफ wrap न हो तो breakpoint basis भी रीसेट कर सकता है।
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.toolbar__action {
flex: 1 1 10rem;
}
@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}
संकरे viewport कोई दूसरी लेआउट भाषा नहीं हैं — वही flex उपकरण, अलग मान। दिशा या wrap बदलें; दूसरी HTML ट्री न बनाएँ।
शांत रिस्पॉन्सिव flex आदत
पहले एक मुख्य breakpoint। order से घुमाव के बजाय wrap और दिशा पलटना चुनें। स्रोत क्रम समझदार रखें। तरल छवियाँ, जटिल breakpoint सिस्टम और पूरी Responsive थ्योरी बाद के पाठों के लिए छोड़ें।
.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}
.page__main {
flex: 1 1 auto;
min-width: 0;
}
.page__rail {
flex: 0 0 16rem;
}
@media (max-width: 48rem) {
.page {
flex-direction: column;
}
.page__rail {
flex-basis: auto;
width: auto;
}
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}
खुद आज़माएँ
flex-wrap: wrapऔरflex: 1 1 14remसे कार्ड पंक्ति बनाएँ।max-width: 40remके नीचे shell कोflex-direction: columnकरें।- छोटे breakpoint पर टूलबार क्रियाओं को
flex-basis: 100%करें। min-widthजोड़ें ताकि चिप्स कुचलने के बजाय wrap हों।- रिस्पॉन्सिव लेआउट «ठीक» करने के लिए
orderका इस्तेमाल न करें।
आम गलतियाँ
- wrap या स्टैक के बजाय आइटम को हमेशा सिर्फ सिकोड़ना
orderको रिस्पॉन्सिव लेआउट टूल बनाकर tab क्रम तोड़नाflex-wrapभूल जाना और सोचना कार्ड कभी क्यों नहीं गिरते- हर flex गुण एक विशाल media query में डाल देना
- इस पाठ को पूरा Responsive Design कोर्स समझ लेना
सारांश
- रिस्पॉन्सिव flex चौड़ाई के साथ wrap, दिशा और basis अनुकूल करता है
flex-wrapप्लस समझदार basis/min-widthपंक्तियों को reflow देता है- media query संकरी स्क्रीन पर स्टैक के लिए
flex-directionपलटती है - शांत breakpoint चुनें; लेआउट ट्रिक के लिए
orderसे बचें - गहरी Responsive और Media Queries इकाइयाँ बाद में आती हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी