flex-wrap プロパティ
flex-wrap プロパティは、フレックスコンテナにおいて、横並びにした子エレメント（フレックスアイテム）を折り返す、折り返さないを指定するプロパティです。
フレックスコンテナとは display:flex; が設定されたエレメントです。
div{
display:flex;
flex-wrap: wrap;
}
フレックスコンテナに入り切らない場合に flex-wrap プロパティは機能します。折り返さない場合はフレックスアイテムの幅は自動で調整されます。
ページ内 Index
構文(Syntax)
CSS
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit ;
DOM ( JavaScript )
String = object.style.flexWrap;
object.style.flexWrap=" nowrap | wrap | wrap-reverse | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| nowrap | 初期値（default値）、折り返しなし |
| wrap | 折り返す |
| wrap-reverse | 逆順に並べて折り返す |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | nowrap |
| 継承（Inherited） | No |
| CSS Animation | No |
Example
flex-wrapの例です。フレックスアイテムがフレックスコンテナに横に並びきらない場合に機能します。
nowrap値ではフレックスアイテムが横並びで収まるように自動で幅が調整されます。その場合はフレックスアイテムに設定されたwidth値は機能しないようです。
関連するプロパティ
display: flex; には以下の関連するプロパティがあります。これらを使って大きさや配置を調整します。
| プロパティ | 概要 |
|---|---|
| flex-basis | フレックスアイテムの基本となる幅 |
| align-content | フレックスラインの垂直方向の配置 |
| align-items | 初期の配置位置 |
| align-self | フレックスアイテムの配置位置 |
| justify-content | 主軸方向での配置を指定 |
| flex-wrap | 横並びにしたフレックスアイテムの折り返し |
| flex-direction | フレックスアイテムの縦または横の並び |
| flex-flow | flex-direction、flex-wrapを一括指定 |
| order | フレックスアイテムの順序を変更 |