バッジ付きリストグループ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

このレシピでは、カウントを示すバッジ付きのリストグループのパターンを作成します。

テキストの右側に表示されるカウントを示すバッジ付きの項目のリスト。

要件

項目のコンテンツ量に関係なく、リスト項目の右側にバッジを並べて表示する必要があります。 1 行のコンテンツでも、複数行のコンテンツでも、バッジは常に垂直方向の中央に配置する必要があります。

レシピ

行った選択

フレックスボックスは、この特定のパターンを簡単にし、またレイアウトの変更を容易にします。

テキストとバッジが正しく並ぶようにするために、justify-content プロパティに space-between の値を使用します。 これにより、項目間に余分な空白が入ります。 実際の例では、このプロパティを削除すると、テキストが 1 行より短い項目のバッジがテキストの末尾に移動します。

コンテンツを垂直方向に揃えるには、align-items プロパティを使用してテキストとバッジを交差軸上で揃えます。 代わりに、バッジをコンテンツの上部に揃える場合は、これを align-items: flex-start に変更します。

ブラウザーの互換性

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

justify-content

BCD tables only load in the browser

align-items

BCD tables only load in the browser

関連情報