最終更新日 2021年6月19日

flex-flowプロパティ

flex-flowは、flex-directionとflex-wrapの値を、まとめて指定するためのショートハンドプロパティです。値は、1～2個指定でき、半角スペースで区切って、好きな順番で並べます。

CSS3での変更点

・flex-flowは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
各プロパティの初期値	「display: flex;」か「display: inline-flex;」が指定された要素	なし

値	説明
flex-directionの値	フレキシブルボックス内のボックスの配置方法を指定します。
flex-wrapの値	フレキシブルボックスをマルチラインにします。

サンプルコード

flex-flow: row wrap;
flex-flow: column wrap;
flex-flow: row wrap-reverse;
flex-flow: column wrap-reverse;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。