CSS ・ Flexbox・Grid
flex-direction
アイテムの並ぶ方向
Flexbox で、子要素（フレックスアイテム）を並べる方向を指定します。横並び・縦並びと、その逆順を選べます。
01
サンプルコード
HTML
1<div class="flex row">
2 <div class="item">1</div><div class="item">2</div><div class="item">3</div>
3</div>
4<div class="flex column">
5 <div class="item">1</div><div class="item">2</div><div class="item">3</div>
6</div>
CSS
1.flex {
2 display: flex;
3 gap: 6px;
4 margin-bottom: 12px;
5}
6.row {
7 flex-direction: row;
8}
9.column {
10 flex-direction: column;
11 align-items: flex-start;
12}
13.item {
14 padding: 8px 14px;
15 background: #b68235;
16 color: #fff;
17}
02
実行結果
ブラウザでの表示
03
解説
flex-direction は、display: flex を指定した親要素に書き、子要素を並べる方向（主軸）を決めます。初期値は横並びの row です。
column にすると縦に並びます。このとき主軸が縦になるため、justify-content は縦方向、align-items は横方向の配置を指定するように入れ替わります。
row-reverse・column-reverse は逆順に並べます。ただし見た目の順番とHTMLの順番がずれるため、読み上げやキーボード操作の順番に注意します。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
row | 左から右へ横並び（初期値） |
row-reverse | 右から左へ横並び |
column | 上から下へ縦並び |
column-reverse | 下から上へ縦並び |
スマートフォンでは縦、PCでは横に並べる
メディアクエリで並ぶ方向を切り替えます。
CSS
1.cards {
2 display: flex;
3 flex-direction: column;
4 gap: 16px;
5}
6@media (min-width: 760px) {
7 .cards {
8 flex-direction: row;
9 }
10}
注意点
- 01flex-direction は、子要素ではなく display: flex を指定した親要素に書きます。
- 02reverse を使うと、見た目の順番とタブキーで移動する順番が逆になります。