📐 Days 7–12 – Layout और Responsive Design · दिन 08
दिन 8: Flexbox 2: असली Layouts (Navbar, Cards, Footer)
⏱ 100 min📶 Intermediate🎯 100% self-study
दिन 8 / 20
✅ आज आप सीखेंगे
- Logo, links, search और buttons वाला navbar
- Product cards: बराबर ऊँचाई, buttons नीचे टिके
- Highlighted plan वाली pricing table
- Sticky-footer page layout (footer हमेशा नीचे)
- बिना JavaScript mobile menu toggle
🏢 असली दुनिया में
Coaching institute के लिए आपका पहला freelance काम: “हमारे course cards के ‘Enroll’ buttons अलग-अलग ऊँचाई पर हैं क्योंकि descriptions की लंबाई अलग है, और छोटे pages पर footer screen के बीच में तैरता है।” दोनों क्लासिक Flexbox fixes हैं जो clients तुरंत नोटिस करते हैं।
Pattern 1: navbar
HTML + CSS
<style>
.nav { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgb(0 0 0 / 8%); flex-wrap: wrap; }
.logo { font-weight: 800; color: #264de4; font-size: 1.15rem; }
.links { display: flex; gap: 14px; }
.links a { color: #374151; text-decoration: none; font-weight: 500; }
.search { flex: 1; min-width: 140px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 99px; }
.btn { background: #264de4; color: #fff; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; }
body { background: #f1f5f9; }
</style>
<nav class="nav">
<span class="logo">VidyaCoaching</span>
<div class="links"><a href="#">Courses</a><a href="#">Results</a><a href="#">Faculty</a></div>
<input class="search" type="search" placeholder="Search courses…" aria-label="Search courses">
<a class="btn" href="#">Enroll</a>
</nav>Pattern 2: एक ही ऊँचाई पर buttons वाले cards
HTML + CSS
<style>
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card {
flex: 1 1 200px; /* grow, shrink, min ~200px → wraps on phones */
display: flex;
flex-direction: column; /* stack content vertically */
background: #fff; border-radius: 14px; padding: 16px;
box-shadow: 0 6px 20px rgb(0 0 0 / 7%);
}
.card h3 { margin: 0 0 6px; }
.card p { color: #6b7280; margin: 0 0 12px; }
.card .btn {
margin-top: auto; /* ⭐ pushes the button to the bottom */
text-align: center; background: #264de4; color: #fff; padding: 8px; border-radius: 8px; text-decoration: none;
}
body { background: #f1f5f9; }
</style>
<div class="cards">
<article class="card"><h3>JEE Main</h3><p>2-year classroom programme.</p><a class="btn" href="#">Enroll</a></article>
<article class="card"><h3>NEET</h3><p>Biology-focused batch with weekly tests, doubt sessions, printed notes and mentoring by doctors.</p><a class="btn" href="#">Enroll</a></article>
<article class="card"><h3>Class 10 Boards</h3><p>Maths + Science crash course.</p><a class="btn" href="#">Enroll</a></article>
</div>💡 margin-top: auto trick
Flex container के अंदर auto margin उस तरफ़ की सारी ख़ाली जगह खा लेता है। Column के आख़िरी item पर वह उसे नीचे धकेलता है; nav item पर (margin-left: auto) सबसे दाएँ।
Pattern 3: pricing section
HTML + CSS
<style>
.plans { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.plan { flex: 1 1 170px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px; text-align: center; }
.plan h3 { margin: 0; color: #6b7280; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.plan .price { font-size: 2rem; font-weight: 800; margin: 8px 0; }
.plan ul { list-style: none; padding: 0; margin: 0 0 14px; color: #374151; line-height: 1.9; }
.plan a { display: block; padding: 9px; border-radius: 8px; border: 2px solid #264de4; color: #264de4; text-decoration: none; font-weight: 700; }
.plan.pro { padding: 28px 18px; border: 2px solid #264de4; box-shadow: 0 12px 30px rgb(38 77 228 / 20%); }
.plan.pro a { background: #264de4; color: #fff; }
.tag { display: inline-block; background: #f59e0b; font: 700 11px system-ui; padding: 3px 8px; border-radius: 99px; margin-bottom: 6px; }
</style>
<div class="plans">
<div class="plan"><h3>Basic</h3><div class="price">₹999</div><ul><li>Recorded lectures</li><li>PDF notes</li></ul><a href="#">Choose</a></div>
<div class="plan pro"><span class="tag">MOST POPULAR</span><h3>Pro</h3><div class="price">₹2,499</div><ul><li>Live classes</li><li>Weekly tests</li><li>Doubt support</li></ul><a href="#">Choose</a></div>
<div class="plan"><h3>Premium</h3><div class="price">₹4,999</div><ul><li>Everything in Pro</li><li>1:1 mentoring</li></ul><a href="#">Choose</a></div>
</div>Pattern 4: sticky footer layout
HTML + CSS
<style>
html, body { height: 100%; margin: 0; }
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
header, footer { background: #111827; color: white; padding: 12px 16px; }
main { flex: 1; padding: 16px; } /* ⭐ main grows, footer is pushed down */
</style>
<header>Header</header>
<main>Very short page content.</main>
<footer>Footer – always at the bottom, even on short pages</footer>Pattern 5: सिर्फ़-CSS mobile menu
HTML + CSS
<style>
.top { display: flex; justify-content: space-between; align-items: center; background: #264de4; color: #fff; padding: 10px 14px; border-radius: 10px 10px 0 0; }
.top summary { list-style: none; cursor: pointer; font-size: 1.4rem; }
.top summary::-webkit-details-marker { display: none; }
.menu-links { display: flex; flex-direction: column; background: #1e3a8a; border-radius: 0 0 10px 10px; }
.menu-links a { color: #fff; padding: 10px 14px; text-decoration: none; border-top: 1px solid rgb(255 255 255 / 15%); }
</style>
<details class="mobile">
<summary class="top"><b>VidyaCoaching</b><span>☰ <small>Menu</small></span></summary>
<nav class="menu-links"><a href="#">Courses</a><a href="#">Results</a><a href="#">Faculty</a><a href="#">Contact</a></nav>
</details>🧠 असली responsive switch कहाँ से आता है
Day 11 में आप media query जोड़ेंगे: desktop पर horizontal links और सिर्फ़ phones पर यह ☰ menu। आज लिखी Flexbox बिल्कुल वैसी ही रहेगी।
🏅 आज के Job Skills
✔ ऐसा navbar जिसमें एक item जगह भरे✔ Aligned buttons वाले बराबर-ऊँचाई cards✔ Highlighted pricing layout✔ हर page पर footer नीचे रखना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: 3 columns (About, Links, Contact) वाला footer बनाएँ जो phones पर wrap हो, और नीचे copyright row।
Solution देखें
Task 2: “Testimonial” card बनाएँ: बाएँ गोल photo, दाएँ quote और नाम; पतली screens पर stack (flex-wrap)।
Task 3: margin-left: auto से navbar में “Logout” link सबसे दाएँ करें।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. अलग-ऊँचाई cards में buttons नीचे:
Auto margin ख़ाली जगह खाता है।
2. Cards पर flex: 1 1 200px का मतलब…
Basis 200px।
3. Sticky footer के लिए main पर…
Main बढ़ता है।
4. Search bar navbar की बची चौड़ाई भरे…
Grow factor।
5. कौन सा HTML बिना JS toggle देता है?
Native खुलना/बंद होना।
Interview corner
💼 Interview Corner
Row में cards की बराबर ऊँचाई कैसे?
Flex items default में cross axis पर stretch होते हैं (align-items: stretch), इसलिए एक flex row के cards बराबर ऊँचे होते हैं। हर card को column flex container बनाएँ और footer/button पर margin-top: auto लगाएँ।
Sticky footer कैसे बनाएँगे?
body को min-height: 100vh (या 100%) वाला column flex container बनाएँ और main को flex: 1 दें ताकि वह अतिरिक्त ऊँचाई ले। विकल्प: body पर grid-template-rows: auto 1fr auto।
सारांश
- Navbar: flex + align-items: center + खिंचने वाले हिस्से पर flex: 1।
- Cards: wrap rows + column cards + margin-top: auto।
- Sticky footer: body column flex, main flex: 1।
- details/summary + flex = आसान mobile menu।
➡️ आगे
Day 9: CSS Grid – असली दो-आयामी layouts के लिए rows, columns, fr units और gaps।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
Wrap हुई row में आख़िरी card बहुत बड़ा क्यों?
flex: 1 के साथ अकेला आख़िरी item पूरी row भरने को बढ़ता है। max-width दें, या पूरी तरह बराबर card grids के लिए auto-fill वाला Grid (Day 10) लें।
क्या flex containers nest कर सकते हैं?
हाँ – flex item ख़ुद display: flex हो सकता है। असली layouts flex के अंदर flex होते हैं (page → navbar → link group)।
