CSS | display: flexで並び方向を指定する方法
FlexBox（フレックスボックス）で「flex-direction」を利用して並びの方向を指定する方法を紹介しています。
flex-directionで並び方向を指定する
「flex-direction」はFlexBox（フレックスボックス）での並び方向を指定する事が可能なプロパティです。
「flex-direction」で指定可能な値は以下の4種類です。
| 値 | 並びの方向 |
|---|---|
| flex-direction: row; | 左から右へ |
| flex-direction: row-reverse; | 右から左へ |
| flex-direction: column; | 上から下へ |
| flex-direction: column-reverse; | 下から上へ |
以下は動的に「flex-direction」の値を変更する動作サンプルになります。
See the Pen CSS Vertical and horizontal center (display:flex) by yochans (@yochans) on CodePen.