flexboxでは、並べられた各要素を一列に配置します。デフォルトの状態だと改行されずに各要素が小さくなって表示されてしまいます。
今回ご紹介する flex-wrap は収まりきらない要素を折り返して、複数行で表示する方法です。
以下で実際に見ていきましょう。
コンテンツ
【flex-wrap】要素を複数行で表示する
flex-wrap: nowrap
（※HTML、CSS、RESULTのボタンを押すと表示が切り替わります）
これはデフォルトの状態と同じです。各要素を小さくしてまでも横一列に表示させます。
なので幅が足りない場合には、各要素はつぶれてしまいます。
flex-wrap: wrap
See the Pen
wrap by taichi (@taichi_na)
on CodePen.
最初の行に入りきらなかった分は、改行されています。
形を崩さずにデバイスの大きさに応じて改行してくれるので、PCだと１行でスマホだと3行といった具合に、このままでもレスポンシブとなりますね。便利！
flex-wrap: wrap-reverse
See the Pen
wrapreverse by taichi (@taichi_na)
on CodePen.
複数行表示かつ、スタートの位置が左下に変わりました。
まとめ：自動改行させたいときは flex-wrap プロパティ
今回見てきたように、flex-wrap プロパティを使えば、要素の形を崩さずに自動で改行をしてくれます。使い方によってはとても便利な機能なので、レイアウトの際には積極的に使てみてください。
ちなみに、古いAndroid（4.0~4.3）では使うことができませんのでご注意ください。
次回は flex-wrap 状態の各要素の配置について勉強してみましょう。
