CSSリファレンス
flex-wrapの意味と使い方
通常コンテナ内のフレックスアイテムは、1行で配置されます。「flex-wrap」はコンテナ内のアイテムを、複数の行に配置できるようになります。フレックスアイテムが複数の行に分割されると、それぞれの行は独立して配置されることになります。幅の伸縮に関する指定やjustify-contentプロパティ、align-selfプロパティは指定した行にのみ適用されます。
値の指定方法
nowrap
フレックスコンテナは1行になります。フレックスアイテムは、コンテンツの書字方向とflex-directionプロパティの値で指定されたレイアウト方向に1行で配置されます。
wrap
フレックスコンテナ内に複数行配置できるようにします。フレックスアイテムは、コンテンツの書字方向とflex-directionプロパティの値で指定されたレイアウト方向で配置されながら、交差軸の終端の方向へ折り返されていきます。
wrap-reverse
フレックスコンテナ内に複数行配置できるようにしますが、折り返しが「wrap」とは逆向きになります。フレックスアイテムは、コンテンツの書字方向およびflex-directionプロパティの値で指定されたレイアウト方向で配置されながら、交差軸の始端の方向へおりかえされていきます。