【CSS Modules】flex-flow省略形プロパティの使い方

flex-flowプロパティは、CSS Flexboxレイアウトにおいて、Flexコンテナ（親要素）のメイン軸の方向と、Flexアイテム（子要素）の折り返し方をまとめて設定するためのプロパティです。これは、flex-directionとflex-wrapという二つの独立したプロパティの機能を一度に指定できる省略形（shorthand-property）として提供されています。

flex-directionは、Flexアイテムがコンテナ内でどのように配置されるか、つまりメイン軸の方向を定義します。例えば、rowを指定するとアイテムは左から右へ水平に並び、columnを指定すると上から下へ垂直に並びます。row-reverseやcolumn-reverseを使用すると、それぞれ逆方向にアイテムを配置することができます。

一方、flex-wrapは、Flexコンテナの幅や高さにアイテムが収まらない場合に、アイテムを次の行または列に折り返すかどうかを制御します。nowrapは折り返さずに全てを一行に表示し、wrapは必要に応じて複数行に折り返します。wrap-reverseは通常の折り返しとは逆の順序で折り返します。

flex-flowプロパティを使用することで、これら二つの設定を「flex-flow: <flex-directionの値> <flex-wrapの値>;」という書式で簡潔に記述できます。例えば、「flex-flow: column wrap;」と指定すると、アイテムは縦方向に並び、コンテナの高さが足りなくなった場合には横に折り返されて配置されます。このように、flex-flowはFlexboxレイアウトの基本的な配置規則を効率的に定義し、コードの可読性を高めるのに役立ちます。

Copy
1flex-flow: row wrap;

引数なし

引数はありません

戻り値なし

戻り値はありません