0Pricing
CSS Academy · Lesson

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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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:

.navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar .logo {
  flex: none;
  margin-right: auto; /* pushes links to the right */
}

.navbar .nav-links {
  display: flex;
  gap: 24px;
}

Centered Hero Section

Full-height centered content with Flexbox:

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  text-align: center;
}

Card Grid

Responsive card grid with wrapping and consistent gutters:

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 280px;
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

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:

.media {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.media-img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.media-body {
  flex: 1;
  min-width: 0;
}

Sticky Footer with Flex

Push the footer to the bottom without setting fixed heights:

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex: 1; /* grows to fill available space */
}

Icon + Text Button

Vertically centered icon + text in a button:

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
}

.btn svg {
  flex: 0 0 20px;
}

Holy Grail with Flexbox

Three-column holy grail layout (header, footer, sidebar-main-sidebar):

.holy-grail {
  display: flex;
}

.left-sidebar  { flex: 0 0 200px; }
.main-content  { flex: 1; }
.right-sidebar { flex: 0 0 160px; }

Form Row with Labels

Aligned label-input pairs in a form row:

.form-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.form-row label {
  flex: 0 0 120px; /* fixed label width */
}

.form-row input {
  flex: 1;
}

Thumbnail Gallery

A wrap-based image gallery:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gallery img {
  flex: 1 1 200px;
  max-width: 300px;
  height: 200px;
  object-fit: cover;
}

Chip/Tag List

Inline wrapping chips/tags that flow like text:

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex: none;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #e0e7ff;
  color: #4338ca;
}

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.

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, and the CSS Academy course includes 4 lessons in total. 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.

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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. Flex Item Alignment Override with align-self
  2. Order Property and Visual Reordering
  3. Flex Shorthand Patterns
  4. Common Flexbox Layouts: Nav Cards Media Object
← Back to CSS Academy