# flex-direction

> フレックスコンテナ内のアイテムの配置方向を指定するプロパティです。row（横並び）、column（縦並び）、row-reverse、column-reverseの値があり、レスポンシブデザインでの方向切り替えに便利です。

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

## 構文

```css
flex-direction: row | row-reverse | column | column-reverse
```

## Tailwindでは

- `flex-row` → flex-direction: row
- `flex-col` → flex-direction: column
- `flex-row-reverse` → flex-direction: row-reverse
- `flex-col-reverse` → flex-direction: column-reverse

## ブラウザ対応

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

## コード例

### 例1: 横方向（左から右）に配置（デフォルト）

```css
flex-direction: row;
```

### 例2: 縦方向（上から下）に配置

```css
flex-direction: column;
```

## TIPS

レスポンシブデザインでは、画面サイズに応じてrowとcolumnを切り替えることが多い。

## よくある間違い

親要素にdisplay: flexを指定し忘れると効果がない。

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

row/columnを切り替えると主軸が変わり、justify-content（主軸）とalign-items（交差軸）の意味が入れ替わります。AIはレスポンシブでcolumnに切り替えた際に、中央寄せ指定を追従させ忘れることが多いです。

## AIへの依頼文例

- PCでは横並び・スマホでは縦並びにしたい。flex-directionの切替で中央寄せが崩れないように実装して

## 関連プロパティ

- [display](https://www.css-dictionary.com/property/display.md)
- [justify-content](https://www.css-dictionary.com/property/justify-content.md)
- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [flex-wrap](https://www.css-dictionary.com/property/flex-wrap.md)