flex-wrap

概要

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

他のプロパティや詳細情報については 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;
}

仕様書

ブラウザ実装状況

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

関連情報

• CSS flexible box の利用