Flexboxによるメディアオブジェクトパターン

メディアオブジェクトパターン

メディアオブジェクトは最も基本的なUIパターンの1つです — 片側に画像やアイコン、隣にテキストコンテンツを配置します。コメントスレッド、ユーザープロフィール、通知リストなど、数多くのインターフェースに登場します。

CSSコード

.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;
}

仕組み

• 画像: flex: 0 0 autoで画像が固有のサイズを維持 — 拡大も縮小もしません。
• ボディ: flex: 1でテキストエリアが残りの水平スペースすべてを埋めます。
• min-width: 0: 長い文字列を含む場合のテキストのオーバーフローを防止。
• align-items: flex-start: 画像を上部に揃え、テキストの高さに合わせて引き伸ばされないようにします。

バリエーション

反転（画像を右に）:

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

中央揃え:

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

実際の使用例

このパターンはソーシャルメディアフィード（アバター＋投稿）、メールクライアント（送信者アイコン＋メッセージプレビュー）、通知パネル、商品レビュー、チャットインターフェースで使用されています。