プログラミングメモ

コンテンツをタイル状に並べるレイアウトはグリッドレイアウトの一つですが、大量のコンテンツを表示する幅に応じて可変的に並べるのにもFlexboxは便利です。
ここではFlexboxのflex-wrapプロパティを用いてコンテンツを並べてみます。

flex-wrapプロパティはFlexboxのコンテンツ要素の折り返しを指定するプロパティです。
ここでflex-wrapプロパティで指定した要素はFlexboxの要素の範囲内を越えた場合、自動的に要素の並びを折り返して表示されます。
このプロパティで指定できる値は次のようなものです

• nowrap:初期値で折り返しは行いません


• wrap:表示の左上から要素を並べ折り返します


• wrap-reverse:表示の右下から要素を並べ折り返します

またflex-wrapプロパティはdisplay:flexと同じcssの要素内に記述します。
例としては

.flexwrap {
display:flex;
flex-wrap:wrap;
}

これでflexwrap要素内のコンテンツにflex-wrapプロパティが値wrapで適用されます。




12個のコンテンツをflex-wrapプロパティを値wrapとwrap-reverseをそれぞれ用いて並べました。
ウィンドウなどの幅を変えるとコンテンツがそれぞれの値に応じて折り返し並んで表示されます。