flex-directionでフレックスアイテムの配置方向を指定【CSS】

flex-directionプロパティは、Flexboxモデルにおけるフレックスアイテムの配置方向を指定するプロパティです。

flex-directionの値の指定方法

flex-directionプロパティでは、以下のような値を指定できます。

row

rowを指定すると、フレックスアイテムは左から右に配置され、要素はHTMLの書き順で表示されます。

row-reverse

row-reverseを指定すると、フレックスアイテムは右から左へと配置されます。

column

columnを指定すると、ブロック要素と同様、フレックスアイテムは上から下に配置されます。

column-reverse

column-reverseを指定すると、フレックスアイテムは下から上に配置されます。

ちなみにそれぞれdisplayプロパティでinline-flexを指定しています。

関連記事
『Flexboxモデルのフレックスコンテナを指定する【CSS】』