align-items 交差軸配置プロパティ

最終更新：2026-09-13

align-items align-items 交差軸配置プロパティ

align-items プロパティは、すべての flex アイテムの交差軸（cross axis）方向の配置を設定し、主軸（main axis）に垂直な方向の位置を制御します。初期値は stretch で、アイテムは交差軸方向にコンテナの高さいっぱいに引き伸ばされます。このプロパティは垂直中央揃え、上端揃え、下端揃え、ベースライン揃えなどの一般的なレイアウトによく使われます。

カテゴリ
初期値	normal
継承	いいえ
適用対象	すべての要素
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

align-items: normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;

⚙️ 値

値	タイプ	説明
`normal \| stretch \| flex-start \| flex-end \| center \| baseline`	キーワード	交差軸方向の配置

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： justify-content: center と align-items: center を組み合わせると、flex アイテムを水平・垂直方向の両方で中央揃えできます。これは flexbox で最も一般的な中央揃えの手法の一つです。

注意： baseline はすべてのアイテムを文字のベースラインに合わせて揃えます。フォントサイズが異なる場合に便利です。ただし、テキストを持たないアイテムがあると、その下端がベースラインとして扱われ、意図しない配置になることがあります。

❓ よくある質問

Qalign-items と align-self の違いは何ですか？

Aalign-items は flex コンテナに設定し、すべての子要素に同じ交差軸配置を与えます。align-self は個別の flex アイテムに設定し、そのアイテムだけコンテナの既定値を上書きします。他のアイテムはコンテナの配置を維持したまま、一つのアイテムだけ目立たせたい場合に便利です。align-self は常に align-items より優先されます。同じ関係は justify-items と justify-self にも当てはまり、コンテナの既定値と単一アイテムの上書きの対応になります。

Qなぜ align-items: center で垂直中央揃えにならないのですか？

Aalign-items は交差軸に作用します。コンテナに明示的な高さがなく、高さがコンテンツで決まる場合、交差軸方向に余白がないため中央揃えが見えません。よくある罠：既定の align-items: stretch でコンテナの高さが未指定だと、交差軸に余白がないため中央揃えが効いていないように見えます。コンテナに明確な高さ（例: height: 200px）を設定してください。主軸方向も中央揃えにするなら justify-content: center を追加します。

Qなぜ align-items: stretch が効かないのですか？

Astretch が効くのは、アイテムに明示的な交差軸サイズがない場合だけです。主軸が row のとき、アイテムが height を指定すると stretch は上書きされ、アイテムは自身の高さで描画されます。同様に、コンテナに交差軸方向の確定したサイズがなければ、伸ばす対象がありません。stretch を効かせるには、アイテムの交差軸サイズを auto のままにし、コンテナにその方向の確定サイズを持たせてください。