Chapter 25: Flexbox
Flexbox, which is probably the single most useful and most loved layout tool in modern CSS (especially for beginners to intermediate developers in 2026).
Flexbox is not just another CSS property — it’s a complete layout system that completely changed how we build almost every component and section of a website.
Before Flexbox (pre-2012–2015), people used:
- float: left/right + clearfix hacks
- display: table tricks
- inline-block with ugly whitespace fixes
- JavaScript for vertical centering
All of them were painful.
Flexbox arrived and said:
“I will let you easily align items in one direction (row or column), distribute space, control order, handle wrapping, and vertically center things with one line of code.”
Let’s learn it properly — like I’m sitting next to you in VS Code with Live Server open.
1. The Core Idea of Flexbox
Two main roles:
- Flex Container (the parent) → gets display: flex
- Flex Items (the direct children) → automatically become flexible
Only direct children become flex items — grandchildren do not (unless you make a nested flex container).
Main axis vs Cross axis (very important!)
text
|
0 1 2 3 4 5 6 7 8 9 10 |
flex-direction: row (default) ─────────────────────► main axis (horizontal) │ │ cross axis (vertical) ▼ |
text
|
0 1 2 3 4 5 6 7 8 9 10 |
flex-direction: column │ │ main axis (vertical) ▼ ─────────────────────► cross axis (horizontal) |
2. Most Important Properties (Parent = Flex Container)
These go on the parent element that has display: flex
| Property | Most common values | What it actually does (very clearly) |
|---|---|---|
| flex-direction | row (default), column, row-reverse, column-reverse | Defines main axis direction — the direction items flow |
| flex-wrap | nowrap (default), wrap, wrap-reverse | Whether items stay in one line or wrap to new lines when there is no space |
| justify-content | flex-start, center, flex-end, space-between, space-around, space-evenly | Distributes free space on the main axis (most loved property!) |
| align-items | stretch (default), center, flex-start, flex-end, baseline | Aligns items on the cross axis (perfect for vertical centering in rows) |
| align-content | same as align-items + space-between etc. | Only matters when there are multiple lines (flex-wrap: wrap) — aligns the lines themselves |
| gap | 20px, 1.5rem, 1em 2em (row-gap column-gap) | Modern way to add space between items (replaces margin hacks) |
3. Most Useful Properties on Flex Items (Children)
| Property | Common values | What it does |
|---|---|---|
| flex | 1, 0 1 auto, none, 2 1 0 | Shorthand: grow • shrink • basis |
| flex-grow | 0 (default), 1, 2, 3… | How much extra space this item takes (1 = equal share) |
| flex-shrink | 1 (default), 0 | Can this item shrink when space is limited? (0 = never shrink) |
| flex-basis | 0, auto, 200px, 30% | Initial main-size before grow/shrink happens |
| align-self | auto (default), center, stretch… | Override parent’s align-items for this one item |
| order | 0 (default), -1, 1, 2… | Change visual order without changing HTML (accessibility warning!) |
4. Real, Practical Flexbox Example You Can Play With
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Explained – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Flexbox Playground</h1> <!-- Example 1: Simple horizontal navigation --> <section class="demo"> <h2>1. Navigation Bar (row + space-between)</h2> <nav class="nav-example"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </nav> </section> <!-- Example 2: Centered content vertically & horizontally --> <section class="demo hero-demo"> <h2>2. Vertical & Horizontal Centering</h2> <div class="centered-box"> <h3>I am perfectly centered!</h3> <p>No matter the parent size</p> </div> </section> <!-- Example 3: Responsive cards with grow/shrink --> <section class="demo"> <h2>3. Responsive Card Grid (flex-wrap + flex-grow)</h2> <div class="cards"> <div class="card">Card 1<br>Grows & shrinks</div> <div class="card grow-more">Card 2<br>flex-grow: 2</div> <div class="card">Card 3</div> <div class="card">Card 4<br>Will wrap on mobile</div> </div> </section> <!-- Example 4: Column layout --> <section class="demo column-demo"> <h2>4. Column Direction + align-items</h2> <div class="column-box"> <div>Top</div> <div class="middle">Middle – stretched</div> <div>Bottom</div> </div> </section> </div> </body> </html> |
style.css
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
* { margin:0; padding:0; box-sizing:border-box; } body { font-family: system-ui, sans-serif; background: #f8fafc; color: #1e293b; padding: 40px 20px; } .container { max-width: 1100px; margin: 0 auto; } h1 { text-align: center; color: #1d4ed8; margin-bottom: 3rem; } h2 { color: #1e40af; margin: 3rem 0 1.5rem; } /* ── Demo wrapper ── */ .demo { background: white; border-radius: 12px; padding: 2.5rem; margin: 3rem 0; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } /* 1. Navigation bar */ .nav-example { display: flex; justify-content: space-between; background: #1e40af; padding: 1.2rem 2rem; border-radius: 8px; } .nav-example a { color: white; text-decoration: none; font-weight: 500; } /* 2. Perfect centering */ .hero-demo { height: 300px; } .centered-box { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #eff6ff; height: 100%; border-radius: 12px; text-align: center; } /* 3. Responsive cards */ .cards { display: flex; flex-wrap: wrap; gap: 2rem; } .card { flex: 1 1 250px; /* grow + shrink + minimum size */ background: #dbeafe; padding: 2rem; border-radius: 12px; text-align: center; min-height: 140px; display: flex; align-items: center; justify-content: center; } .grow-more { flex-grow: 2; /* takes more space */ } /* 4. Column example */ .column-demo { height: 400px; } .column-box { display: flex; flex-direction: column; height: 100%; background: #f0fdf4; border-radius: 12px; overflow: hidden; } .column-box > div { padding: 2rem; text-align: center; } .middle { flex: 1; /* grows to fill remaining space */ background: #bbf7d0; display: flex; align-items: center; justify-content: center; font-weight: bold; } |
Quick Play Tasks (Do These Now!)
- In .nav-example → change justify-content: space-between to center or space-around
- In .centered-box → remove align-items: center → see text move
- In .cards → change flex-wrap: wrap to nowrap → see overflow on narrow screen
- In .card → set flex: none → cards stop growing/shrinking
- In .column-box → change flex-direction: column to row → see how it flips
Summary – When to Use Flexbox
Use Flexbox when you want to:
- Align items horizontally or vertically
- Distribute space between/around items
- Create equal-height columns
- Build navigation bars, card grids, centered heroes, media objects
- Make responsive layouts without media queries (with flex-wrap + flex-basis)
Next big step after Flexbox = CSS Grid (for full 2D layouts)
How does it feel when you resize the browser and watch the cards wrap? Any part confusing? Want more real-world patterns (pricing cards, testimonial carousel, etc.)?
You’ve just learned the #1 layout tool used by almost every frontend developer in 2026. Chai khatam? Fresh cup lao — let’s keep going! 🚀 😄
