CSS flex-wrap 属性

定義と使用方法

flex-wrap 属性は、フレックスアイテムがリナイズされるかどうかを定義します。

コメント：要素がフレックスアイテムでない場合、flex 属性は無効です。

も参照してください：

CSS チュートリアル： CSS フレックスボックス

CSS リファレンスマニュアル：flex 属性

CSS リファレンスマニュアル：flex-basis 属性

CSS リファレンスマニュアル：flex-direction 属性

CSS リファレンスマニュアル：flex-flow 属性

CSS リファレンスマニュアル：flex-grow 属性

CSS リファレンスマニュアル：flex-shrink 属性

HTML DOM リファレンスマニュアル：flexWrap 属性

例

必要に応じてリナイズします：

div {
  display: flex;   
  flex-wrap: wrap;
}

試してみてください

CSS 语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性値

値 説明
nowrap デフォルト値。リナイズを行わないように設定します。
wrap この属性は、必要に応じてリナイズします。
wrap-reverse この属性は、必要に応じて反方向にリナイズします。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

技術的詳細

デフォルト値： nowrap
継承： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 语法： object.style.flexWrap="nowrap"

浏览器支持

表中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0