CSSリファレンス
flex-directionの意味と使い方
「flex-direction」フレックスアイテムを縦横どちらの方向に配置するのかは、フレックスコンテナの主軸の方向で決まります。
flex-directionプロパティは、この主軸の方向を指定するプロパティです。
値の指定方法
row
主軸の方向は、コンテンツの書字方向において、インライン要素が表示される方向と同じになります。例えば、左から右へ記述する文字の場合は主軸の方向も左から右となり、フレックスアイテムを左から右へ並べて配置します。
row-reverse
主軸の方向は、「row」と逆向きになります。例えば、左から右へ記述する文字の場合は主軸の方向は右から左となり、フレックスアイテムを右から左へ並べて配置します。
column
主軸の方向は、コンテンツの書字方向において、ブロックレベル要素が表示される方向と同じになります。例えば、左から右へ記述する文字の場合は主軸の方向は上から下となり、フレックスアイテムを上から下へ並べて配置します。
column-reverse
主軸の方向は「column」と逆向きになります。例えば、左から右へ記述する文字の場合は主軸の方向は下から上となり、フレックスアイテムを下から上へ並べて配置します。