flex-wrap

概要

CSS flex-wrap プロパティは、flex アイテムを単一ラインに押し込むか、あるいは複数ラインに折り返してもよいかを指定します。折り返しを許可する場合は、ラインを積み重ねる方向の制御も可能です。

初期値nowrap
適用対象flex containers
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* グローバル値 */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

以下の値を指定できます:

nowrap
flex アイテムは単一ラインにレイアウトされ、flex コンテナからあふれ出す場合もあります。cross-start の位置は、flex-direction の値に応じて start または before と同一になります。
wrap
flex アイテムは複数ラインに分けられます。cross-start の位置は flex-direction の値の値に応じて start または before と同一になります。また cross-end は、特定された cross-start の反対側になります。
wrap-reverse
wrap と同様ですが、cross-startcross-end の位置が入れ替わります。

形式構文

nowrap | wrap | wrap-reverse

element {
  flex-wrap: nowrap;
}

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module
The definition of 'flex-wrap' in that specification.
Last Call Working Draft  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 28.0 21.0-webkit 11.0 12.10 6.1-webkit
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート 28.0 4.4 11.0 12.10 7.0-webkit

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz, teoli, ethertank
 最終更新者: yyss,