# align-items

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

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/align-items/

## 構文

```css
align-items: flex-start | flex-end | center | baseline | stretch
```

## Tailwindでは

- `items-start` → align-items: flex-start
- `items-center` → align-items: center
- `items-end` → align-items: flex-end
- `items-baseline` → align-items: baseline
- `items-stretch` → align-items: stretch

## ブラウザ対応

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

## コード例

### 例1: アイテムを交差軸の中央に配置

```css
align-items: center;
```

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

```css
align-items: stretch;
```

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

```css
align-items: flex-start;
```

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

```css
align-items: flex-end;
```

## TIPS

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

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

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

## AIへの依頼文例

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

## 関連プロパティ

- [justify-content](https://www.css-dictionary.com/property/justify-content.md)
- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)
- [align-self](https://www.css-dictionary.com/property/align-self.md)