align-items

レイアウト・配置

フレックスコンテナ内のアイテムの交差軸方向の配置を指定するプロパティです。flex-start、flex-end、center、baseline、stretchなどの値があり、高さが異なるアイテムの縦方向の配置を制御します。

構文

Syntax
align-items: flex-start | flex-end | center | baseline | stretch
🎮

インタラクティブデモ

コントロール

プレビュー

1
2
3

生成されたCSS

.element { align-items: stretch; }

コード例

例 1

align-items: center;
実行結果
1
2
3

アイテムを交差軸の中央に配置

例 2

align-items: stretch;
実行結果
1
2
3

アイテムをコンテナの高さに合わせて引き伸ばす（デフォルト）

例 3

align-items: flex-start;
実行結果
1
2
3

アイテムを上（開始位置）に揃えて配置

例 4

align-items: flex-end;
実行結果
1
2
3

アイテムを下（終了位置）に揃えて配置

💡 TIPS

justify-contentと組み合わせて完全中央配置が可能。

関連プロパティ

ブラウザサポート

IE11+, 全モダンブラウザ