CSSリファレンスマニュアル

CSS @ルール(RULES)

flex-wrap CSS属性は、フレックスアイテムを一行に強制的に配置するか、フレックスコンテナ内の利用可能な空間に応じて複数の行や複数の列に配置するかを指定します。

以下の表はこの属性の使用方法とバージョンハイストリと、JavaScriptスクリプトでの使用文法を示しています。

デフォルト値：	nowrap
適用範囲：	エラストイックコンテナ
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript文法：	object.style.flexWrap="wrap-reverse"

この属性の文法は以下の通りです：

flex-wrap:　nowrap　|　wrap　|　wrap-reverse　|　initial　|　inherit

以下の例では、flexを使用する方法を示しています。-wrap属性。

例

.flex-container　{
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　nowrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　nowrap;
}

以下の表はこの属性の値を説明しています。

値	説明
nowrap	デフォルト値。フレックスアイテムは行を分割したり列を分割したりしません。
wrap	必要に応じて、エラストイックなアイテムが複数の行に分割されます。
wrap-reverse	同じwrapですが、アイテムは逆の順序で行を跨ぎます。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のflexを使用します。-wrapの属性値。

flex-wrap属性のブラウザの互換性は以下の表に示されています。数字はこの属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox18+ ^-moz-、28+ Google Chrome 21+ ^-webkit-、29+ Internet Explorer 11+ Apple Safari 6。1+ ^-webkit- Opera 12。1+

以下のチュートリアルを参照してください：CSS3多列レイアウト。