📐 Days 7–12 – Layout & Responsive Design · Day 08
Day 8: Flexbox 2: Real Layouts (Navbar, Cards, Footer)
⏱ 100 min📶 Intermediate🎯 100% self-study
Day 8 / 20
✅ Today you will learn
- Navbar with logo, links, search and buttons
- Product cards: equal heights, buttons pinned to the bottom
- Pricing table with a highlighted plan
- Sticky-footer page layout (footer always at the bottom)
- A no-JavaScript mobile menu toggle
🏢 In the real world
Your first freelance task for a coaching institute: “The ‘Enroll’ buttons on our course cards are at different heights because descriptions have different lengths, and on short pages the footer floats in the middle of the screen.” Both are classic Flexbox fixes that clients notice immediately.
Pattern 1: the 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: cards with buttons at the same height
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>💡 The margin-top: auto trick
Inside a flex container, an auto margin eats all free space on that side. On the last item of a column it pushes that item to the bottom; on a nav item (margin-left: auto) it pushes it to the far right.
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: a CSS-only 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>🧠 Where the real responsive switch comes from
On Day 11 you will add a media query: show the horizontal links on desktop and this ☰ menu only on phones. The Flexbox you wrote today stays exactly the same.
🏅 Job skills unlocked today
✔ Build a navbar where one item fills the space✔ Make equal-height cards with aligned buttons✔ Create a highlighted pricing layout✔ Keep the footer at the bottom of every page
Practice tasks
🏋️ Practice – do it yourself
Task 1: Build a footer with 3 columns (About, Links, Contact) that wrap on phones and a bottom copyright row.
Show solution
Task 2: Create a “testimonial” card: round photo on the left, quote and name on the right; on narrow screens stack them (flex-wrap).
Task 3: Push the “Logout” link to the far right of a navbar using margin-left: auto.
Quick quiz
🧠 Quick Quiz – test yourself
1. Buttons at the bottom of different-height cards:
Auto margin eats free space.
2. flex: 1 1 200px on cards means…
Basis 200px.
3. Sticky footer needs main to have…
Main grows.
4. Search bar fills the leftover navbar width with…
Grow factor.
5. Which HTML gives a no-JS toggle?
Native open/close.
Interview corner
💼 Interview Corner
How do you make cards in a row equal height?
Flex items stretch on the cross axis by default (align-items: stretch), so cards in one flex row are equal height. Make each card a column flex container and use margin-top: auto on the footer/button to align their contents.
How would you build a sticky footer?
Make body a column flex container with min-height: 100vh (or 100%), and give main flex: 1 so it absorbs extra height. Alternatively, grid-template-rows: auto 1fr auto on body.
Summary
- Navbar: flex + align-items: center + flex: 1 on the stretchy part.
- Cards: wrap rows + column cards + margin-top: auto.
- Sticky footer: body column flex, main flex: 1.
- details/summary + flex = simple mobile menu.
➡️ Next
Day 9: CSS Grid – rows, columns, fr units and gaps for true two-dimensional layouts.
Frequently Asked Questions
My last card in a wrapped row is huge – why?
With flex: 1 the lonely last item grows to fill the row. Give a max-width, or use Grid with auto-fill (Day 10) for perfectly even card grids.
Can I nest flex containers?
Yes – a flex item can itself be display: flex. Real layouts are flex inside flex (page → navbar → link group).
