flex-wrap

In This Article

概要

CSS flex-wrap プロパティは、子アイテムを単一ラインに押し込むか、あるいは複数ラインに流し込めるようにしてもよいかを指定します。

初期値 error:(<s*codes+ids*=s*"initial-flex-wrap"[^>]*>)</s*codes+ids*=s*"initial-flex-wrap"[^>
適用対象 flex コンテナ
継承なし
メディア visual
計算値指定値

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

形式構文: nowrap | wrap | wrap-reverse

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

flex-wrap: inherit

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

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 の位置が入れ替わります。

element {
  flex-wrap: nowrap;
}

仕様書	状況	備考
CSS Flexible Box Layout Module	勧告候補

機能	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
基本サポート	未サポート [1]	21.0-webkit	未サポート	12.10	未サポート

機能	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
基本サポート	未サポート [1]	?	未サポート	12.10	未サポート

[1] Firefox は単一ラインの flexbox のみサポートしています。

タグ:

Contributors to this page: ethertank, yyss

最終更新者: ethertank, 2013/05/10 15:29:00

サイドバーを隠す