Common Flexbox Layouts: Nav Cards Media Object
Build practical navigation bars, card grids, and media objects using flexbox.
Common Flexbox Layouts: Nav Cards Media Object is a free CSS Academy lesson on CoddyKit. This is lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
Why Flexbox Patterns Matter
Certain layout patterns appear in virtually every web project. Flexbox solves each efficiently with minimal CSS. Knowing these patterns means faster development and less code.
Navigation Bar Pattern
A horizontal nav with a logo on the left and links on the right:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Centered Hero Section
Full-height centered content with Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Card Grid
Responsive card grid with wrapping and consistent gutters:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Media Object
The media object — a fixed-width image alongside flexible text — is a foundational UI pattern used in comments, social posts, and list items:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Sticky Footer with Flex
Push the footer to the bottom without setting fixed heights:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Icon + Text Button
Vertically centered icon + text in a button:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Holy Grail with Flexbox
Three-column holy grail layout (header, footer, sidebar-main-sidebar):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Form Row with Labels
Aligned label-input pairs in a form row:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Thumbnail Gallery
A wrap-based image gallery:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Chip/Tag List
Inline wrapping chips/tags that flow like text:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Quick Check
In the media object pattern, what prevents the text body from overflowing if it contains a long unbreakable string?
Recap
Common Flexbox patterns: navbar (logo + auto-margin + links), hero (column + center justify), media object (fixed image + flex:1 body with min-width:0), sticky footer (column body + flex:1 main), card grid (wrap + flex:1 1 Xpx). These five patterns cover the majority of real-world layout needs.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Common Flexbox Layouts: Nav Cards Media Object” lesson free?
Yes — the full text of “Common Flexbox Layouts: Nav Cards Media Object” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.
What will I learn in “Common Flexbox Layouts: Nav Cards Media Object”?
Build practical navigation bars, card grids, and media objects using flexbox. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “Common Flexbox Layouts: Nav Cards Media Object” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Flex Item Alignment Override with align-self
- Order Property and Visual Reordering
- Flex Shorthand Patterns
- Common Flexbox Layouts: Nav Cards Media Object