CSS flex-flow プロパティ

例

フレックスアイテムを逆順に表示し、必要ならラップします：

div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: row-reverse wrap;
}

Try it Yourself ❯

定義と用法

flex-flow プロパティは、flex-direction と flex-wrap プロパティに対するショートハンドプロパティです。

flex-direction プロパティは、フレックスアイテムの方向を指定します。

flex-wrap プロパティは、フレックスアイテムをラップすべきかどうかを指定します。

注: 要素がフレックスアイテムでない場合、flex-flow プロパティの効果はありません。

デフォルト値：	row nowrap
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.flexFlow="column nowrap" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-moz- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
flex-flow	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS 構文

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

プロパティの値

値	説明	Play it
flex-direction	指定可能な値： row row-reverse column column-reverse initial inherit デフォルト値は "row" です。フレックスアイテムの方向を指定します	Play it ❯
flex-wrap	指定可能な値： nowrap wrap wrap-reverse initial inherit デフォルト値は "nowrap" です。フレックスアイテムをラップすべきかどうかを指定します	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照	Play it ❯
inherit	このプロパティは親要素を継承します。inherit を参照

CSS flex-flow プロパティ

例

定義と用法

ブラウザ・サポート

CSS 構文

プロパティの値

関連ページ