CSS | display: flexで並び方向を指定する方法

2022-06-29CSS,CSS フレックスボックス

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.

2022-06-29CSS,CSS フレックスボックス

Posted by Yousuke.U