Media Object Pattern with Flexbox

The Media Object Pattern

The media object is one of the most fundamental UI patterns — an image or icon on one side with text content beside it. Coined by Nicole Sullivan, it appears in comment threads, user profiles, notification lists, and countless other interfaces.

CSS Code

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

.media-image {
  flex: 0 0 auto;
}

.media-image img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

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

How It Works

• Image: flex: 0 0 auto ensures the image stays at its intrinsic size — it does not grow or shrink.
• Body: flex: 1 makes the text area fill all remaining horizontal space.
• min-width: 0: Prevents the text from overflowing when it contains long strings.
• align-items: flex-start: Aligns the image to the top, so it does not stretch to match the text height.

Variants

Reversed (image on right):

.media-reversed {
  flex-direction: row-reverse;
}

Centered alignment:

.media-centered {
  align-items: center;
}

Nested media objects: Media objects can nest inside each other — simply place another .media inside .media-body for threaded comment layouts.

Responsive Behavior

On very small screens, you may want to stack the image above the content:

@media (max-width: 480px) {
  .media {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

Real-World Usage

This pattern is used in social media feeds (avatar + post), email clients (sender icon + message preview), notification panels, product reviews, and chat interfaces. Its simplicity and flexibility make it one of the most reusable Flexbox patterns.