レイアウト
flex-direction
flex-direction は、フレックスボックスの中の項目を横（row）と縦（column）のどちらに並べるか、どちらの端から並べ始めるかを指定します。
構文
row | row-reverse | column | column-reverseプレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
flex-direction: column;
}コントロール
flex-directioncolumn
1234
解説
値の書き方
row：文字と同じ向き（横書きなら左から右）に並べます。初期値です。row-reverse：rowの逆向き（右から左）に並べます。column：行が進む向き（横書きなら上から下）に並べます。column-reverse：columnの逆向き（下から上）に並べます。
flex-direction は、display が flex か inline-flex の箱（フレックスコンテナ）に書きます。このページのプレビューは、補助の宣言で display: flex にしています。
向きで変わること
flex-direction で決めた向きが主軸になり、justify-content は主軸の向き、align-items は主軸と直交する向き（交差軸）で項目をそろえます。column にすると、 justify-content が縦の、align-items が横のそろえ方になります。
row と column は文字の向きに従うので、direction: rtl では row が右から左に、writing-mode: vertical-rl では上から下になります。
-reverse は見た目の順だけを逆にする
row-reverse と column-reverse が逆にするのは見た目の順だけです。Tab キーでフォーカスが移る順や読み上げの順は HTML の順のままなので、順番に意味がある並びでは HTML のほうを並べ替えます。
並べ始める端も逆になるので、row-reverse では justify-content: flex-start が右寄せになります。
ショートハンド
flex-flow を使うと、flex-direction と flex-wrap をまとめて書けます（flex-flow: column wrap）。