CSSflex-flow プロパティは、 flex-direction プロパティと flex-wrap プロパティの一括指定プロパティです。

構文

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> および <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* グローバル値 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;

値に関して詳しくは、 flex-direction および flex-wrap をご覧ください。

形式文法

<'flex-direction'> || <'flex-wrap'>

element { 
  /* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */
  flex-flow: column-reverse wrap;            
}

仕様書

仕様書 状態 備考
CSS Flexible Box Layout Module
flex-flow の定義
勧告候補 初回定義

初期値一括指定の各プロパティとして
適用対象flex containers
継承なし
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 28
完全対応 28
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11Opera 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 ありFirefox Android 完全対応 28
完全対応 28
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 9.2
完全対応 9.2
完全対応 7.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, fscholz, teoli, ethertank
最終更新者: mfuji09,