📐 Days 7–12 – Layout & Responsive Design · Day 07
Day 7: Flexbox 1: Axis, Alignment & Wrapping
⏱ 90 min📶 Intermediate🎯 100% self-study
Day 7 / 20
✅ Today you will learn
- Flex container vs flex items, main vs cross axis
- flex-direction and justify-content
- align-items, align-self and perfect centring
- gap and flex-wrap
- flex-grow, flex-shrink, flex-basis and the flex shorthand
🏢 In the real world
“How do I vertically centre this?” was the most-asked CSS question for 15 years. Flexbox solved it in two lines. Today every navbar, button row, card row, chat bubble and footer you see on Indian startup websites is built with Flexbox – it is a must-know for every front-end interview.
Container, items and the two 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 (on container) | Controls | Common values |
|---|---|---|
| flex-direction | Main axis direction | row (default), column, row-reverse |
| justify-content | Alignment on the MAIN axis | flex-start, center, flex-end, space-between, space-around, space-evenly |
| align-items | Alignment on the CROSS axis | stretch (default), center, flex-start, flex-end, baseline |
| gap | Space between items | 8px, 1rem |
| flex-wrap | Allow new lines | nowrap (default), wrap |
justify-content – along the 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 – across the 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>centre
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 and 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>💡 When the axis turns
In flex-direction: column the main axis is vertical, so justify-content now moves items up/down and align-items left/right. Always ask “which way is my 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 | Meaning | Typical |
|---|---|---|
| flex-grow | Share of extra space | 0 (default) or 1 |
| flex-shrink | Can it shrink when space is short? | 1 (default), 0 to forbid |
| flex-basis | Starting size before grow/shrink | auto, 200px, 30% |
| flex: 1 | Shorthand = 1 1 0%: equal flexible columns | ⭐ most used |
| flex: 0 0 200px | Fixed 200px item | Sidebars, avatars |
| align-self | Override align-items for one item | center, flex-end |
| order | Visual order (keep DOM order logical!) | -1, 1 |
Real UI: a chat message and a 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 unlocked today
✔ Think in main and cross axes✔ Align and centre with justify-content and align-items✔ Wrap and change direction✔ Size items with flex-grow, shrink and basis
Practice tasks
🏋️ Practice – do it yourself
Task 1: Build a header bar: logo on the left, three links on the right, vertically centred.
Show solution
Task 2: Make a row of 3 pricing boxes with equal widths using flex: 1 and gap: 1rem.
Task 3: Create a footer with 4 columns that wrap into 2 rows on small screens (flex-wrap + flex: 1 1 200px).
Quick quiz
🧠 Quick Quiz – test yourself
1. justify-content works on…
align-items = cross.
2. Centre a child both ways in a flex row:
Two lines.
3. flex: 1 on three items gives…
Equal shares.
4. Items overflow the row. Allow new lines with…
Default is nowrap.
5. In flex-direction: column, justify-content: center centres…
Main axis is now vertical.
Interview corner
💼 Interview Corner
Explain flex: 1.
It is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. The item starts from zero and takes an equal share of the free space, so several flex: 1 items become equal columns regardless of content.
When would you pick Flexbox over Grid?
Flexbox for one-dimensional layouts where content size drives the layout – navbars, toolbars, button groups, chat bubbles, centring. Grid for two-dimensional layouts where rows and columns must align.
Summary
- display: flex on the parent; children are items.
- justify-content = main axis, align-items = cross axis.
- gap for spacing, flex-wrap: wrap for new lines.
- flex: 1 = equal flexible share; flex: 0 0 200px = fixed.
➡️ Next
Day 8: Flexbox in real projects – responsive navbar, card rows, sticky footer layout and a pricing section.
Frequently Asked Questions
Why doesn’t align-items: center work?
Usually the container has no extra height (it is only as tall as its content), so there is nothing to centre within. Give it a height or min-height.
Is gap supported in flexbox?
Yes, in all modern browsers. It is cleaner than margins on items.
