Flexbox で要素を横並びにしたものの、「縦に並べたい」「画面が狭いときに折り返したい」と思ったことはありませんか。その並ぶ方向と折り返しを決めるのが flex-direction と flex-wrap です。display: flex を指定した親要素にこの2つを足すだけで、横並び・縦並び・自動折り返しを自由にコントロールできます。この記事では、それぞれの値の意味と使い分け、2つをまとめて書ける flex-flow、よくあるつまずきまで、実際の表示を見比べながら初心者の方にも分かるように解説します。
目次
flex-direction と flex-wrap の役割
display: flex を指定すると、その中の子要素（Flexアイテム）は既定で横一列に並びます。この並び方を変えるのが、親要素に指定する2つのプロパティです。flex-direction は並ぶ方向（横か縦か、順方向か逆か）を、flex-wrap ははみ出したときに折り返すかどうかを決めます。
まずは下のプレビューで動きを確かめてみましょう。flex-direction を column に変えると縦並びに、flex-wrap を nowrap にすると折り返さなくなります。値を書き換えてすぐに違いを試せます。
<div class="box row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.box {
display: flex;
/* 並ぶ方向を変える: row / row-reverse / column / column-reverse */
flex-direction: row;
/* はみ出したら折り返す: nowrap（既定） / wrap */
flex-wrap: wrap;
gap: 8px;
background: #eef;
padding: 8px;
}
.item {
background: #4a3aff;
color: #fff;
font-family: sans-serif;
padding: 16px 24px;
border-radius: 4px;
}
flex-direction で並ぶ方向を変える
flex-direction には4つの値があります。横並びにするか縦並びにするか、そして順番を逆にするかを指定します。既定値は row（左から右への横並び）です。
| 値 | 並び方 |
|---|---|
row（既定） | 横並び（左 → 右） |
row-reverse | 横並び（右 → 左） |
column | 縦並び（上 → 下） |
column-reverse | 縦並び（下 → 上） |
.menu {
display: flex;
flex-direction: column; /* 縦に積んで並べる */
}スマホではメニューを縦並び、パソコンでは横並びにしたい、といったレイアウトは flex-direction をメディアクエリで切り替えるだけで実現できます。
主軸と交差軸を意識する
Flexbox を理解するうえで大切なのが、主軸（main axis）と交差軸（cross axis）という考え方です。主軸は flex-direction で決めた「アイテムが並ぶ方向」、交差軸はそれと直角に交わる方向です。
これが重要なのは、配置を指定する justify-content と align-items が、この軸を基準に動くためです。justify-content は主軸方向、align-items は交差軸方向の配置を決めます。つまり flex-direction を column にすると、2つのプロパティが効く向きも入れ替わります。「中央寄せのつもりが横方向に効かない」といった混乱は、たいていこの軸の入れ替わりが原因です。
| direction | justify-content が効く向き | align-items が効く向き |
|---|---|---|
row | 横方向 | 縦方向 |
column | 縦方向 | 横方向 |
flex-wrap で折り返しを制御する
flex-wrap は、アイテムが親要素の幅に収まらないときの動きを決めます。既定の nowrap では、アイテムは折り返さず横幅を縮めて1行に押し込まれます。wrap を指定すると、収まらないアイテムが次の行へ折り返されます。
| 値 | 動作 |
|---|---|
nowrap（既定） | 折り返さない（1行に収める） |
wrap | 収まらないものを次の行へ折り返す |
wrap-reverse | 折り返すが、行の順序が逆になる |
.cards {
display: flex;
flex-wrap: wrap; /* 画面幅に応じてカードを折り返す */
gap: 16px;
}
.card {
width: 200px; /* 折り返しの基準になる幅 */
}カードを並べるレイアウトでは、flex-wrap: wrap とアイテムの幅を組み合わせるのが定番です。画面幅に応じて1行に並ぶ枚数が自動で変わり、メディアクエリを書かなくてもレスポンシブにできます。
flex-flow でまとめて指定する
flex-direction と flex-wrap は、flex-flow という一括指定プロパティでまとめて書けます。値は「方向 折り返し」の順にスペースで区切って並べます。
.box {
display: flex;
/* flex-direction と flex-wrap をまとめて書く */
flex-flow: row wrap;
}折り返しや方向が思いどおりにならないとき
wrap にしたのに折り返さない
flex-wrap: wrap を指定しても折り返らないときは、アイテムに幅が指定されていないか、flex-shrink によって縮んでしまっているのが原因のことが多いです。アイテムに width や flex-basis で幅の基準を与えると、その幅で収まらなくなった時点できちんと折り返されます。
中央寄せが片方向にしか効かない
前述のとおり、justify-content と align-items は主軸・交差軸を基準に効きます。flex-direction: column のときは、横方向の中央寄せが align-items 側になります。「縦並びなのに justify-content: center で横中央にならない」というときは、align-items: center を試してみてください。
reverse で順番が直感と違う
row-reverse や wrap-reverse は見た目の順序だけを反転させ、HTML上の並び順やキーボード操作の順序は変わりません。見た目と操作順がずれると使いにくくなることがあるため、reverse 系は装飾的な用途にとどめ、内容の順序自体を変えたいときは HTML を並べ替えるのが安全です。
まとめ
flex-direction と flex-wrap は、Flexbox のアイテムの並び方を決める基本のプロパティです。要点を整理します。
flex-directionは並ぶ方向。row（横）/column（縦）と、その reverse。flex-wrapは折り返し。既定のnowrapは1行に収め、wrapで次の行へ。- direction を変えると主軸・交差軸が入れ替わり、
justify-contentとalign-itemsの効く向きも変わる。 - 2つは
flex-flow: row wrap;のようにまとめて書ける。 - 折り返らないときはアイテムの幅指定を、中央寄せが効かないときは軸を確認する。
カードを並べるなら flex-flow: row wrap ＋ アイテムの幅指定、というパターンを覚えておくと、レスポンシブなレイアウトがすぐ作れます。まずは方向と折り返しを切り替えて、表示の変化を体感してみてください。