CSS flex-flow 属性

定義と使用法

flex-flow 属性は以下の属性のショートカット属性です：

注釈：フレックス属性は、フレックスアイテムでない要素に対して無効です。

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

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

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

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

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

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

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

反方向で表示し、必要に応じて改行する：

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

flex-flow: flex-direction flex-wrap|initial|inherit;

値	説明
flex-direction	可能な値： row row-reverse column column-reverse initial inherit デフォルト値は "row" です。フレックスアイテムの方向を指定します。
flex-wrap	可能な値： nowrap wrap wrap-reverse initial inherit デフォルト値は "nowrap" です。フレックスアイテムが改行されるべきかどうかを指定します。
initial	この属性をデフォルト値に設定します。参照してください。 initial。
inherit	この属性は親要素から継承されます。参照してください。 inherit。

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

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

数字は、-webkit-、-ms-、-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