CSS辞書

align-items

レイアウト・配置

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

構文

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

Tailwindでは

items-startalign-items: flex-start
items-centeralign-items: center
items-endalign-items: flex-end
items-baselinealign-items: baseline
items-stretchalign-items: stretch

インタラクティブデモ

Try it

コントロール

プレビュー

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と組み合わせて完全中央配置が可能。

🤖 AIがよく間違えるポイント

デフォルトがstretchのため「子要素の高さが勝手に揃う」ことをAIは説明せずに使いがちです。1行のアイテム配置はalign-items、複数行の行間配置はalign-contentという使い分けもよく混同されます。

💬 AIへの頼み方

flexの子要素の高さが勝手に伸びる原因を説明して、意図した高さにする修正をして

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

チャット吹き出し（表示・フィードバック）子要素の高さを揃えてコンテンツを上下中央（レイアウトパターン）

ブラウザサポート

Baseline 広く利用可能
Chrome
29+
Firefox
20+
Safari
9+
Edge
12+