Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

flex-flow

『flex-direction』と『flex-wrap』をまとめて指定するショートハンドプロパティです。

サンプルコード

/* 横並び・折り返しなし（初期値と同じ） */
.container { display: flex; flex-flow: row nowrap;}

/* 横並び・折り返しあり */
.container-wrap { display: flex; flex-flow: row wrap;}

/* 縦並び・折り返しあり */
.container-col { display: flex; flex-flow: column wrap;}

指定可能な値一覧

値	概要
<flex-direction>	『row』『row-reverse』『column』『column-reverse』のいずれか。省略時は『row』。
<flex-wrap>	『nowrap』『wrap』『wrap-reverse』のいずれか。省略時は『nowrap』。

仕様情報

項目	内容
初期値	row nowrap
適用対象	フレックスコンテナ（『display: flex』または『display: inline-flex』が指定された要素）
継承	しない
アニメーション	不可（discrete）

対応ブラウザ

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ prefix『-webkit-』が必要

20 以前 ×

Firefox

28 以降 ○

27 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

『flex-flow』は『flex-direction』と『flex-wrap』を一行でまとめて指定できるショートハンドプロパティです。どちらか一方だけを指定することもでき、省略された値は初期値（『row』または『nowrap』）が適用されます。

代表的な組み合わせのイメージ

よく使われる組み合わせ

指定	意味
flex-flow: row nowrap	横並び・折り返しなし（初期値）
flex-flow: row wrap	横並び・折り返しあり（最も多用される）
flex-flow: column nowrap	縦並び・折り返しなし
flex-flow: column wrap	縦並び・折り返しあり
flex-flow: row-reverse wrap	横並び逆順・折り返しあり

パターン: レスポンシブレイアウト

/* PC: 横並び・折り返しあり → SP: 縦並び */
.layout {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}
@media (max-width: 768px) {
    .layout {
        flex-flow: column nowrap;
    }
}

WebProgrammingPortalウェブプログラミングポータル

Caution

CSSプロパティ辞典

flex-flow

サンプルコード

指定可能な値一覧

仕様情報

対応ブラウザ

概要

代表的な組み合わせのイメージ

よく使われる組み合わせ

パターン: レスポンシブレイアウト

関連プロパティ

プロパティ	概要
flex-direction	主軸の方向を指定します。『flex-flow』の第一の値に対応します。
flex-wrap	折り返しの挙動を指定します。『flex-flow』の第二の値に対応します。