📐 Days 7–12 – Layout और Responsive Design · दिन 07
दिन 7: Flexbox 1: Axis, Alignment और Wrapping
⏱ 90 min📶 Intermediate🎯 100% self-study
दिन 7 / 20
✅ आज आप सीखेंगे
- Flex container बनाम flex items, main बनाम cross axis
- flex-direction और justify-content
- align-items, align-self और perfect centring
- gap और flex-wrap
- flex-grow, flex-shrink, flex-basis और flex shorthand
🏢 असली दुनिया में
“इसे vertically center कैसे करें?” 15 साल तक CSS का सबसे ज़्यादा पूछा सवाल था। Flexbox ने इसे दो lines में हल किया। आज Indian startup websites पर दिखने वाला हर navbar, button row, card row, chat bubble और footer Flexbox से बना है – हर front-end interview में ज़रूरी।
Container, items और दो axes
HTML + CSS
<style>
.box { display: flex; gap: 8px; background: #eef2ff; padding: 8px; border-radius: 10px; margin-bottom: 8px; min-height: 70px; }
.box div { background: #264de4; color: #fff; padding: 8px 12px; border-radius: 6px; font: 600 13px system-ui; }
</style>
<div class="box"><div>Item 1</div><div>Item 2</div><div>Item 3</div></div>| Property (container पर) | नियंत्रण | आम values |
|---|---|---|
| flex-direction | Main axis की दिशा | row (default), column, row-reverse |
| justify-content | MAIN axis पर alignment | flex-start, center, flex-end, space-between, space-around, space-evenly |
| align-items | CROSS axis पर alignment | stretch (default), center, flex-start, flex-end, baseline |
| gap | Items के बीच जगह | 8px, 1rem |
| flex-wrap | नई lines की अनुमति | nowrap (default), wrap |
justify-content – main axis पर
HTML + CSS
<style>
.box { display: flex; gap: 8px; background: #eef2ff; padding: 8px; border-radius: 10px; margin-bottom: 8px; min-height: 70px; }
.box div { background: #264de4; color: #fff; padding: 8px 12px; border-radius: 6px; font: 600 13px system-ui; }
.lbl { font: 12px monospace; color: #6b7280; margin: 6px 0 2px; }
</style>
<p class="lbl">flex-start</p>
<div class="box" style="justify-content:flex-start"><div>A</div><div>B</div><div>C</div></div>
<p class="lbl">center</p>
<div class="box" style="justify-content:center"><div>A</div><div>B</div><div>C</div></div>
<p class="lbl">flex-end</p>
<div class="box" style="justify-content:flex-end"><div>A</div><div>B</div><div>C</div></div>
<p class="lbl">space-between</p>
<div class="box" style="justify-content:space-between"><div>A</div><div>B</div><div>C</div></div>
<p class="lbl">space-evenly</p>
<div class="box" style="justify-content:space-evenly"><div>A</div><div>B</div><div>C</div></div>align-items – main axis के आर-पार
HTML + CSS
<style>
.box { display: flex; gap: 8px; background: #eef2ff; padding: 8px; border-radius: 10px; margin-bottom: 8px; min-height: 70px; }
.box div { background: #264de4; color: #fff; padding: 8px 12px; border-radius: 6px; font: 600 13px system-ui; }
.box { min-height: 110px; }
.lbl { font: 12px monospace; color: #6b7280; margin: 6px 0 2px; }
.box .tall { padding-block: 26px; } /* .box div would beat plain .tall (Day 5!) */
</style>
<p class="lbl">stretch (default)</p>
<div class="box"><div>A</div><div class="tall">Tall</div><div>C</div></div>
<p class="lbl">flex-start</p>
<div class="box" style="align-items:flex-start"><div>A</div><div class="tall">Tall</div><div>C</div></div>
<p class="lbl">center</p>
<div class="box" style="align-items:center"><div>A</div><div class="tall">Tall</div><div>C</div></div>Perfect centring in two lines
HTML + CSS
<style>
.hero {
display: flex;
justify-content: center; /* horizontal (main axis) */
align-items: center; /* vertical (cross axis) */
height: 180px;
background: linear-gradient(135deg, #264de4, #06b6d4);
color: white; border-radius: 14px; font: 700 1.4rem system-ui;
}
</style>
<div class="hero">Perfectly centred 🎯</div>flex-direction: column और wrap
HTML + CSS
<style>
.box { display: flex; gap: 8px; background: #eef2ff; padding: 8px; border-radius: 10px; margin-bottom: 8px; min-height: 70px; }
.box div { background: #264de4; color: #fff; padding: 8px 12px; border-radius: 6px; font: 600 13px system-ui; }
.col { flex-direction: column; align-items: flex-start; }
.wrap { flex-wrap: wrap; }
.wrap div { width: 120px; }
</style>
<div class="box col"><div>Step 1: Choose sweet</div><div>Step 2: Quantity</div><div>Step 3: Pay</div></div>
<div class="box wrap"><div>Kaju</div><div>Ghewar</div><div>Ladoo</div><div>Rasmalai</div><div>Barfi</div><div>Peda</div><div>Jalebi</div></div>💡 जब axis घूमता है
flex-direction: column में main axis vertical होता है, तो अब justify-content items को ऊपर/नीचे और align-items बाएँ/दाएँ खिसकाता है। हमेशा पूछें “मेरा main axis किधर है?”।
Item properties: grow, shrink, basis
HTML + CSS
<style>
.box { display: flex; gap: 8px; background: #eef2ff; padding: 8px; border-radius: 10px; margin-bottom: 8px; min-height: 70px; }
.box div { background: #264de4; color: #fff; padding: 8px 12px; border-radius: 6px; font: 600 13px system-ui; }
.g1 { flex: 1; } /* takes 1 share of free space */
.g2 { flex: 2; } /* takes 2 shares */
.fixed { flex: 0 0 120px; } /* never grow, never shrink, 120px */
</style>
<div class="box"><div class="fixed">120px sidebar</div><div class="g1">flex: 1</div><div class="g2">flex: 2 (double)</div></div>
<div class="box"><div>Logo</div><div class="g1" style="background:#06b6d4">flex: 1 search bar fills the rest</div><div>Cart</div></div>| Property | मतलब | आम |
|---|---|---|
| flex-grow | अतिरिक्त जगह का हिस्सा | 0 (default) या 1 |
| flex-shrink | जगह कम हो तो सिकुड़े? | 1 (default), मना करने को 0 |
| flex-basis | grow/shrink से पहले का size | auto, 200px, 30% |
| flex: 1 | Shorthand = 1 1 0%: बराबर flexible columns | ⭐ सबसे ज़्यादा |
| flex: 0 0 200px | Fixed 200px item | Sidebars, avatars |
| align-self | एक item के लिए align-items बदलना | center, flex-end |
| order | दिखने का क्रम (DOM क्रम तार्किक रखें!) | -1, 1 |
असली UI: chat message और media object
HTML + CSS
<style>
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 420px; margin-bottom: 10px; }
.avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #f59e0b; display: grid; place-items: center; font-weight: 700; }
.bubble { background: #f1f5f9; padding: 8px 12px; border-radius: 0 12px 12px 12px; }
.msg.me { margin-left: auto; flex-direction: row-reverse; }
.msg.me .avatar { background: #264de4; color: white; }
.msg.me .bubble { background: #dcfce7; border-radius: 12px 0 12px 12px; }
.bubble small { display: block; color: #6b7280; font-size: 11px; text-align: right; }
</style>
<div class="msg"><div class="avatar">R</div><div class="bubble">Is ghewar available today? Need 3 kg for Teej.<small>10:42</small></div></div>
<div class="msg me"><div class="avatar">S</div><div class="bubble">Yes ji! Fresh batch at 4 pm. Shall I book it?<small>10:43 ✓✓</small></div></div>🏅 आज के Job Skills
✔ Main और cross axis में सोचना✔ justify-content और align-items से align और center✔ Wrap और दिशा बदलना✔ flex-grow, shrink और basis से items का size
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: Header bar बनाएँ: बाएँ logo, दाएँ तीन links, vertically बीच में।
Solution देखें
Task 2: flex: 1 और gap: 1rem से बराबर चौड़ाई वाले 3 pricing boxes की row बनाएँ।
Task 3: 4 columns वाला footer बनाएँ जो छोटी screens पर 2 rows में wrap हो (flex-wrap + flex: 1 1 200px)।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. justify-content किस पर काम करता है?
align-items = cross।
2. Flex row में child को दोनों ओर से बीच में:
दो lines।
3. तीन items पर flex: 1 देता है…
बराबर हिस्से।
4. Items row से बाहर जा रहे। नई lines के लिए…
Default nowrap है।
5. flex-direction: column में justify-content: center बीच में करता है…
अब main axis vertical है।
Interview corner
💼 Interview Corner
flex: 1 समझाइए।
यह flex-grow: 1, flex-shrink: 1, flex-basis: 0% का shorthand है। Item शून्य से शुरू होकर ख़ाली जगह का बराबर हिस्सा लेता है, इसलिए कई flex: 1 items content के बावजूद बराबर columns बनते हैं।
Grid की जगह Flexbox कब?
एक-आयामी layouts के लिए Flexbox जहाँ content size layout तय करता है – navbars, toolbars, button groups, chat bubbles, centring। जहाँ rows और columns दोनों align होने हों, उन दो-आयामी layouts के लिए Grid।
सारांश
- Parent पर display: flex; children items हैं।
- justify-content = main axis, align-items = cross axis।
- Spacing के लिए gap, नई lines के लिए flex-wrap: wrap।
- flex: 1 = बराबर flexible हिस्सा; flex: 0 0 200px = fixed।
➡️ आगे
Day 8: असली projects में Flexbox – responsive navbar, card rows, sticky footer layout और pricing section।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
align-items: center काम क्यों नहीं करता?
आमतौर पर container में अतिरिक्त ऊँचाई नहीं होती (content जितना ही ऊँचा), तो बीच में करने को कुछ नहीं। height या min-height दें।
क्या flexbox में gap support है?
हाँ, सभी आधुनिक browsers में। Items पर margins से ज़्यादा साफ़।
