flex-flow

flex-flow は、フレックスボックスの項目を並べる向き（flex-direction）と、折り返すかどうか（flex-wrap）をまとめて書くショートハンドです。

構文

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

1234

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

flex-flow

rowflex-direction

wrapflex-wrap

.box {
  display: flex;
  flex-flow: row wrap;
}

1234

flex-direction の値（row・row-reverse・column・column-reverse）と、flex-wrap の値（nowrap・wrap・wrap-reverse）を、空白で区切って書きます。
どちらか片方だけでもよく、順番も自由です。wrap column と column wrap は同じ意味です。
省いたほうは初期値になります。flex-flow: column は column nowrap、flex-flow: wrap は row wrap です。

このページのプレビューは、補助の宣言で箱を display: flex にしています。項目の幅を箱の 30% にしているので、折り返すと 3 つと 1 つに分かれます。

ショートハンドなので、片方だけ書いても、もう片方は初期値で上書きされます。先に flex-wrap: wrap と書いたあとに flex-flow: column と書くと、折り返しは nowrap に戻ります。
column の向きで折り返すのは、箱に高さか最大の高さがあって、項目が入りきらないときだけです。
row-reverse や wrap-reverse が逆にするのは見た目の順だけです。Tab キーでフォーカスが移る順や読み上げの順は HTML の順のままです。
主要なブラウザすべてで使えます。