Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

display:flexの学習 その0001-02 並べる方向と改行 flex-direction、flex-wrap、flex-flowについて

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、以下のようなことについてです。

  • flexアイテムを縦に並べるか横に並べるか
  • flexアイテムを改行するかしないか

flex-directionについて

flexコンテナにこのプロパティを設定します。

子要素であるflexアイテムを縦に並べるか、横に並べるかを設定できます。

また、flex-direction: row-reverse;を設定することで、右から左へ並べることができ、flex-direction: column-reverse;を設定することで、下から上へ並べることができます。

flex-wrapについて

flexコンテナにこのプロパティを設定します。

flexコンテナの幅または高さに、flexアイテムが入りきらなくなったとき、改行を許可するかしないかを設定します。

以下のような設定から選べるようです。このプロパティでもreverseがあります。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

flex-flowについて

上記した、flex-direction、flex-wrapをまとめて設定できるショートハンドです。