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

flex-wrapプロパティ

 flex-wrapプロパティは、フレックスコンテナにおいて、横並びにした子エレメント(フレックスアイテム)を折り返す、折り返さないを指定するプロパティです。

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

折り返しを指定(Exampleを参照
div{
	display:flex;
	flex-wrap: wrap;
}

 フレックスコンテナに入り切らない場合にflex-wrapプロパティは機能します。折り返さない場合はフレックスアイテムの幅は自動で調整されます。

関連するプロパティ

 以下のような関連するプロパティがあります。

display:flex;複数のエレメントを緩やかに配列
align-contentフレックスラインの垂直方向の配置
align-items初期の配置位置
align-selfフレックスアイテムの配置位置
justify-content主軸方向での配置を指定
flex-basisフレックスアイテムの基本となる幅
flex-directionフレックスアイテムの縦または横の並び
flex-flowflex-direction、flex-wrapを一括指定

構文(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 AnimationNo

Example

 flex-wrapの例です。フレックスアイテムがフレックスコンテナに横に並びきらない場合に機能します。

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