[CSS]flexboxのflex-wrap: wrap;とは？

flexbox、便利ですよね。Grid Layoutとうまく組み合わせることでサイトのレイアウトを効率よく設定することができます。

その中でもflexboxは横並びの要素をレイアウトする時に使えるのですが、この時にflex-wrap: wrapを使うことで幅が狭くなっても折り返しを指定することができます。

flexboxでflex-wrap: wrapを利用する

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

display: flex;に加えて、flex-wrap: wrap;と記述することで横幅が狭くなった時に、自動でアイテムが折り返すようになります。