Flex Flow（flex-flow）ショートハンドプロパティ

最終更新：2026-09-13

flex-flow Flex Flow（flex-flow）ショートハンドプロパティ

flex-flow は flex-direction と flex-wrap の両方のショートハンドです。1 つの宣言で主軸の方向とアイテムを折り返すかどうかを定義します。この 2 つのプロパティはほぼ常に同時に使われるため、flex-flow を使うとコードをより簡潔に保てます。初期値は row nowrap、つまり折り返しのない水平方向の配置です。

カテゴリ
初期値	row nowrap
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

flex-flow: <flex-direction> || <flex-wrap>;

⚙️ 値

値	タイプ	説明
`<flex-direction> \|\| <flex-wrap>`	値	方向と折り返しのショートハンド

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
flex-flow	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： flex-flow の 2 つの値はどの順序でも書けます。flex-flow: wrap column は flex-flow: column wrap と同等です。ブラウザーはどちらも認識します。

ヒント： flex-direction と flex-wrap はほぼ常に同時に設定されるため、読みやすさと記述の速さのために flex-flow ショートハンドを優先してください。

❓ よくある質問

Qflex-flow は 1 つの値だけで書けますか？

Aはい。1 つの値の場合、ブラウザーはその型によって決定します。row や column などの方向値を指定すると flex-wrap は既定の nowrap のままになり、wrap や nowrap などの折り返し値を指定すると flex-direction は既定の row のままになります。この動作は仕様で定義されているため、どちらかがすでに既定値と一致している場合は両方を書く必要はほとんどありません。

Qflex-flow と flex-direction・flex-wrap を別々に設定する間にパフォーマンスの差はありますか？

Aいいえ。flex-flow は純粋に構文上のショートハンドです。解析後は flex-direction と flex-wrap を別々に書いた場合とまったく同じ効果になります。選ぶのはコードスタイルの問題です。両方の意味を一度に設定するなら flex-flow の方が簡潔で、1 つのプロパティだけを上書きする場合（例えばメディアクエリ内で折り返しだけを変更する）は、個別指定の方が部分的な編集が容易です。

Qflex-flow: column wrap と flex-flow: wrap column に違いはありますか？

Aいいえ。flex-flow は flex-direction と flex-wrap のショートハンドで、仕様では || を使って 2 つの値をどちらの順序でも書けることを示しているため、column wrap と wrap column は同等です。この入れ替え可能な順序はショートハンドの文法上の利便性にすぎず、計算値やパフォーマンスには影響しません。なお、主軸が column の場合、折り返しは水平方向に発生し、新しい列は右側に積み重なる点に注意してください。