CSS Flexbox: Advanced Patterns & Real Layouts
Lesson 21 • Advanced Track
What You'll Learn
Build a sticky footer layout with Flexbox
Create the Holy Grail layout (header, sidebar, main, footer)
Responsive card grids using flex-wrap and flex-basis
The flex shorthand: flex-grow, flex-shrink, flex-basis
Auto margins for powerful alignment tricks
Nested flex containers for complex UIs
💡 Think of It Like This
flex-grow is like appetite. If three children are at a buffet and one has flex-grow: 2, it takes twice as much of the leftover food (space) as its siblings with flex-grow: 1.
| Property | Default | What It Controls |
|---|---|---|
flex-grow | 0 | How much extra space to absorb |
flex-shrink | 1 | How much to shrink when space is tight |
flex-basis | auto | Starting size before grow/shrink |
flex | 0 1 auto | Shorthand: grow shrink basis |
Sticky Footer with Flexbox
The sticky footer stays at the bottom of the viewport even when content is short, and pushes down naturally when content is long.
Holy Grail Layout
The classic header + sidebar + main + sidebar + footer layout, built entirely with Flexbox.
Holy Grail Layout
Header, left sidebar, main content, right sidebar, footer
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holy Grail</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0f172a;
font-family: system-ui, sans-serif;
color: #e5e7eb;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
background: #1e293b;
padding: 15px 20px;
te
...Responsive Card Grid with Flex-Wrap
Create a card grid that adapts to any screen size using flex-wrap and flex-basis.
Flex-Wrap Card Grid
Cards wrap to new rows based on available space
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Grid</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 20px; }
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
/* flex: 1 1 2
...⚠️ Common Mistakes
- Using flex: 1 without understanding it —
flex: 1meansflex: 1 1 0%(grow, shrink, 0 basis). For cards, useflex: 1 1 280pxto set a minimum width. - Forgetting min-width: 0 on flex children — Flex items won't shrink below their content width by default. Add
min-width: 0to allow text truncation. - Not using gap — Using margins for spacing between flex items is fragile. Use
gapinstead. - Overusing Flexbox when Grid is better — For 2D layouts (rows AND columns), CSS Grid is more appropriate.
🎉 Lesson Complete
You've mastered advanced Flexbox patterns:
- ✅ Sticky footer with
flex: 1on main content - ✅ Holy Grail layout with header, sidebars, main, and footer
- ✅ Responsive card grids with
flex-wrapandflex-basis - ✅ The flex shorthand: grow, shrink, basis
Sign up for free to track which lessons you've completed and get learning reminders.