CSS Flex Responsive
In this page:
selector {
display: flex;
flex-wrap: wrap;
}
@media (max-width: length) {
selector {
flex-direction: column;
}
}Wrap-Based Responsive Pattern
सबसे simple responsive Flexbox technique हर item पर flex-wrap: wrap को एक flex-basis (या min-width) के साथ combine करती है — जैसे-जैसे container narrow होता है, जो items अब current line पर fit नहीं होते वे automatically अगली line पर चले जाते हैं, बिना किसी media queries के।
यह अकेले "cards mobile पर reflow होते हैं" layouts के एक बड़े हिस्से को handle कर लेता है।
- Accepted values:
- flex-wrap: wrap — items को अगली line पर जाने देता है
- flex: 1 1 200px — grows, shrinks, ideal 200px
- min-width: <length> — एक floor set करता है
- gap: <length> — wrapped items के बीच spacing
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: The Wrap-Based Responsive Pattern
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.card {
flex-basis: 200px;
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="row">
<div class="card">Card</div>
<div class="card" style="background: seagreen;">Card</div>
<div class="card" style="background: coral;">Card</div>
</div>Column Counts के लिए Percentage-Based flex-basis
किसी wrapping flex row के अंदर items पर flex-basis: 33.33% (लगभग) set करना आपको एक rough 3-column grid देता है जो container shrink होने और items wrap होने पर naturally 2 या 1 columns में बदल जाता है — percentage असल में disguise में "columns per row" है।
gaps को account में लेने के लिए अक्सर calc() को ऊपर layer किया जाता है (जैसे flex-basis: calc(33.33% - 10px))।
- Accepted values:
- flex-basis: 33.333% — प्रति row तीन
- flex-basis: 50% — प्रति row दो
- flex-wrap: wrap — कई rows के लिए ज़रूरी
- gap — gaps को account में लेने के लिए basis कम करें
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Percentage-Based flex-basis for Column Counts
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex-basis: calc(33.33% - 10px);
background: steelblue;
color: white;
padding: 8px;
margin: 4px;
}
</style>
<div class="row">
<div class="col">1</div>
<div class="col" style="background: seagreen;">2</div>
<div class="col" style="background: coral;">3</div>
</div>एक Wrap Trigger के रूप में min-width
एक fixed percentage के बजाय, items को flex-grow: 1 के साथ एक min-width (जैसे min-width: 200px) देना browser को available space के आधार पर तय करने देता है कि प्रति row कितने fit होते हैं।
यह किसी hardcoded percentage से कहीं ज़्यादा naturally responsive grid produce करता है, क्योंकि यह fixed breakpoints पर snap करने के बजाय किसी भी container width को adapt करता है।
- Accepted values:
- min-width: 200px — item कभी इससे narrower नहीं होता
- flex-grow: 1 — items space में expand होते हैं
- flex-wrap: wrap — items को नई line पर जाने देता है
- flex: 1 1 200px — one-line shorthand
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: min-width as a Wrap Trigger
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.item {
min-width: 200px;
flex-grow: 1;
background: steelblue;
color: white;
padding: 8px;
margin: 4px;
}
</style>
<div class="row">
<div class="item">Adapts to available space</div>
<div class="item" style="background: seagreen;">Adapts to available space</div>
</div>Direction Changes के लिए Media Queries के साथ Combine करना
Wrap-based reflow size changes को gracefully handle करता है, लेकिन कभी-कभी आपको एक structural change चाहिए होता है — जैसे किसी sidebar layout को side-by-side से stacked में बदलना — जिसे एक media query के अंदर एक असली flex-direction: column override चाहिए।
rule of thumb: पहले wrap/basis tricks की तरफ़ जाएँ, और सिर्फ तभी एक media query जोड़ें जब *direction* खुद बदलनी हो, सिर्फ columns की संख्या नहीं।
- Accepted values:
- @media (max-width: 600px) — छोटे screens
- flex-direction: column — items को stack करता है
- flex-direction: row — default, साथ-साथ
- flex-wrap: wrap — wrapping की अनुमति देता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Combining with Media Queries for Direction Changes
<style>
.layout {
display: flex;
gap: 8px;
}
@media (max-width: 600px) {
.layout {
flex-direction: column;
}
}
.layout div {
background: steelblue;
color: white;
padding: 12px;
}
</style>
<div class="layout">
<div>Sidebar</div>
<div style="background: seagreen;">Content</div>
</div>Common Responsive Flexbox Pitfalls
एक common mistake है flex-wrap: wrap को पूरी तरह भूल जाना और फिर narrow screens पर overflowing content से जूझना; दूसरी है जब असल में एक fixed minimum size चाहिए तो flex-shrink: 0 के बिना flex-basis इस्तेमाल करना, जिससे items फिर भी अपने intended size से नीचे shrink हो जाते हैं।
कई widths पर test करना (सिर्फ desktop और एक mobile size नहीं) इनमें से ज़्यादातर को जल्दी पकड़ लेता है।
- Accepted values:
- min-width: 0 — items को content size से नीचे shrink होने देता है
- flex-wrap: wrap — wrapping की अनुमति देता है
- flex-shrink: 1 — default, items shrink होते हैं
- overflow: hidden | auto — किसी item के अंदर लंबे content को clip या scroll करता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Common Responsive Flexbox Pitfalls
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 200px;
flex-shrink: 0;
}
</style>
<div class="row">
<div class="item">Stays at its intended 200px size</div>
</div>flex-wrap: wrapभूल जाना, इसलिए items नई line पर जाने के बजाय shrink या overflow होते हैं।flex-basisऔरmin-widthके बजाय fixedwidthvalues इस्तेमाल करना।- viewport meta tag भूल जाना, इसलिए layout phones पर respond नहीं करता।
- Flexbox items को किसी container में एक direction के साथ layout करता है।
- Flex container properties और flex item properties alignment, spacing, और sizing control करती हैं।
- Flexbox अलग-अलग screen sizes को adapt कर सकता है।
Unprefixed Flexbox Chrome 29+, Firefox 28+, Safari 9+ और Edge 12+ में supported है। Flexbox gap Chrome 84+, Firefox 63+ और Safari 14.1+ में supported है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: