CSSリファレンス

flex-wrapの意味と使い方

通常コンテナ内のフレックスアイテムは、1行で配置されます。「flex-wrap」はコンテナ内のアイテムを、複数の行に配置できるようになります。フレックスアイテムが複数の行に分割されると、それぞれの行は独立して配置されることになります。幅の伸縮に関する指定やjustify-contentプロパティ、align-selfプロパティは指定した行にのみ適用されます。

値の指定方法

nowrap

フレックスコンテナは1行になります。フレックスアイテムは、コンテンツの書字方向とflex-directionプロパティの値で指定されたレイアウト方向に1行で配置されます。


wrap

フレックスコンテナ内に複数行配置できるようにします。フレックスアイテムは、コンテンツの書字方向とflex-directionプロパティの値で指定されたレイアウト方向で配置されながら、交差軸の終端の方向へ折り返されていきます。


wrap-reverse

フレックスコンテナ内に複数行配置できるようにしますが、折り返しが「wrap」とは逆向きになります。フレックスアイテムは、コンテンツの書字方向およびflex-directionプロパティの値で指定されたレイアウト方向で配置されながら、交差軸の始端の方向へおりかえされていきます。


関連プロパティ

  • display:要素の表示形式(ブロック・インライン)を指定する
  • flex-direction:レイアウトの方向を指定する
  • flex-flow:レイアウトの方向と行数を一括して指定する