向きの指定【flex-box】

今回はflex-boxで表示した要素の向きの指定のやり方を紹介いたします。

通常時(初期値)

何も指定しなければ通常通り左から右へ表示されます。(flex-direction: row;)

右から左へ

右から左へ表示したい時はrow-reverseを指定します。

display: flex;で指定した親要素に対してflex-direction: row-reverse;を指定します。

すると・・・

このように表示されます。

上から下へ

上から下へ表示したい時はcolumnを指定します。

display: flex;で指定した親要素に対してflex-direction: column;を指定します。

すると・・・

このように上から下へ表示されます。

下から上へ

下から上へ表示したい時はcolmn-reverseを指定します。

display: flex;で指定した親要素に対してflex-direction: column-reverse;を指定します。

すると・・・

このように下から上へ表示されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です