We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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
flex-wrap の定義
勧告候補  

ブラウザ実装状況

 

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応291228111179
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4.4 ?125212.19.2 ?

1. Partial support due to large number of bugs present. See Flexbugs.

 

関連情報

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

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