フレックスアイテムの配置方向と折り返しを指定する

flex-flow

{ flex-flow 【 フレックス・フロー 】 : -direction -wrap; }

flex-flowプロパティは、フレックスアイテムの配置方向と折り返しをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 各プロパティに準じる
適用される要素 フレックスコンテナ
モジュール CSS Flexible Box Layout Module Level 1

値の指定方法

指定できる値は各プロパティと同様です。値は半角スペースで区切って、任意の順序で指定できます。省略した場合は各プロパティの初期値が指定されます。

サンプルコード

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

上の例で指定したflex-flowプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.conatiner{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

関連記事