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