flex-wrap

概要

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;
}

仕様書

ブラウザ実装状況

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

関連情報

• CSS flexible box の利用
• flex 関連 CSS プロパティ: margin 、 align-content 、 align-items 、 align-self 、 display 、 flex 、 flex-basis 、 flex-direction 、 flex-flow 、 flex-grow 、 flex-shrink 、 flex-wrap 、 justify-content 、 min-height 、 min-width 、 order