display: inline-flex 行の中のフレックスの親要素

意味

フレックスの内側のルールはそのままに、親要素自身を行の流れに乗せたい場合に使います。文の途中の操作ボタン、アイコン＋ラベルを1塊にして隣の文字と並べる、といった用途です。

外側の描画です。親要素の幅は、中身と width に従い、外側の親の幅いっぱいには自動では広がりません。flex との違いは、この外側だけです。

内側の描画です。直下の子への justify-content、align-items、gap の効き方は flex と同じです。寄せたい対象が「この小さな塊の中」ならこちら、ページ幅いっぱいに子を分配するなら flex です。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<p>本文の横に <span class="chip"><span>■</span><span>ラベル</span></span> が乗ります。</p>

CSS

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #efeef8;
  padding: 0.25rem 0.55rem;
}

プレビュー

一緒に使う指定です。一覧から行き来できます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）