概要
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-start と cross-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 |