参考にさせて頂いたページ
MDN
その他の記事
- CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
- 【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、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;