Justify Items（justify-items）プロパティ

最終更新：2026-09-13

justify-items Justify Items（justify-items）プロパティ

justify-items プロパティは、コンテナ内のすべてのアイテムのインライン軸（行）方向の既定の配置を設定します。主にグリッドレイアウトに適用され、フレックスボックスでは効果がありません。これは justify-content のアイテムごとの対応版で、アイテムをグループではなく、それぞれのグリッドセル内で配置します。初期値は stretch で、アイテムを引き伸ばしてセルを埋めます。

カテゴリ
初期値	legacy
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

justify-items: normal | stretch | start | end | self-start | self-end | center | left | right | baseline | legacy;

⚙️ 値

値	タイプ	説明
`normal \| stretch \| start \| end \| center \| left \| right \| legacy`	キーワード	アイテムのインライン軸方向の配置

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
justify-items	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

注意： justify-items はフレックスボックスでは効果がありません。グリッドにのみ適用されます。フレックスレイアウトでは、アイテムの配置に justify-content を使ってください。

ヒント： justify-items の legacy 値は古いブラウザーとの互換性のために存在し、justify-self: legacy と組み合わせることを意図しています。新しいプロジェクトでは使わない方がよいです。

❓ よくある質問

Qjustify-items と justify-content の違いは何ですか？

Ajustify-items は各グリッドアイテムに作用し、アイテムが自分のセル内でインライン（水平）軸方向にどう配置されるかを制御します。justify-content はグリッド全体のコンテンツ領域に作用し、トラックがコンテナ内でどう分布するかを制御します。この 2 つの層は独立しており、組み合わせられます。justify-content はコンテナの余った空間を分配し、justify-items は各アイテムをセル内で配置します。

Qjustify-items がフレックスボックスで機能しないのはなぜですか？

Aフレックスボックスにはグリッドセルの概念がないため、アイテムはコンテナに直接配置され、justify-items の適用対象がありません。フレックスボックスでは、主軸方向のアイテム配置に justify-content を、交叉軸方向の配置に align-items を使ってください。align-items と align-self も同様で、これらはブロック軸上のグリッドに役立ち、フレックスでも機能しますが、justify-* の組はグリッド専用です。justify-items とそのアイテムごとの形式 justify-self は、主にグリッドレイアウトに役立ちます。

Qグリッドの各セルのコンテンツを水平方向に中央揃えにするにはどうすればよいですか？

A2 つの方法があります。コンテナに justify-items: center を書けば、すべてのグリッドアイテムがセル内で水平中央揃えになります。あるいは単一のアイテムに justify-self: center を書きます。ここで justify-content: center は使わないでください。これはグリッド全体のコンテンツ領域をコンテナ内で配置するものです。また、既定の justify-items: stretch ではアイテムがセル全体を埋めるため、アイテムが引き伸ばされなくなって初めて中央揃えが効きます。start や center の値を使えば、まずアイテムがコンテンツ幅に縮みます。同時に垂直方向も中央揃えにするには、place-items: center を使ってください。