備忘録的プログラミングリファレンス

flex-flow プロパティ

 flex-flow プロパティは、フレックスコンテナにおいて、flex-directionflex-wrapを一括指定するプロパティです。 子エレメント(フレックスアイテム)の並び方向とその折り返しを指定します。

 フレックスコンテナとはdisplay:flex;を設定したエレメントです。

並び方向とその折り返しを指定(Exampleを参照
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 AnimationNo

Example

 flex-flowの例です。フレックスアイテムを縦方向に並べ、フレックスコンテナの縦に並びきらない場合は折り返します。

 nowrap値ではフレックスアイテムがフッレクスコンテナ内で収まるように自動で幅が調整されます。その場合はフレックスアイテムに設定されたwidth値は機能しないようです。