flex-flowプロパティの説明
CSSのflex-flowプロパティは、フレックス・コンテナがアイテムをレイアウトする祭のフローをまとめて指定します。このプロパティは、flex-directionとflex-wrapの値を一括で指定するショートハンド・プロパティです。
flex-directionに該当する機能は、フレックス・コンテナの主軸方向やアイテムの並び順を制御します。flex-wrapに該当する機能は、アイテムを単一行に収めるか、複数行に折り返すのかを制御します。
flex-flowは、各プロパティの値をどちらか一方、あるいは半角区切りで並べて指定します。使用できる値は、あらかじめ定義されているキーワードです。詳細については各プロパティの解説を参照してください。
これらの機能の関係性を把握したい方は、フレックス・ボックスの解説を参照してください。
flex-flowに指定できる値
<'flex-direction'>flex-directionで使用できる値を指定します。フレックス・コンテナの主軸方向やアイテムの並び順を指定します。省略した場合は初期値のrowが適用されます。<'flex-wrap'>flex-wrapで使用できる値を指定します。フレックス・アイテムを単一行に収めるか、複数行に折り返すのかを制御します。省略した場合は初期値のnowrapが適用されます。
flex-flowの使い方とサンプルコード
flex-flowプロパティの構文は以下の通りです。
/* <'flex-direction'> */
flex-flow: row;
flex-flow: column;
flex-flow: row-reverse;
flex-flow: column-reverse;
/* <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* <'flex-direction'> | <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: row wrap;
flex-flow: column nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* グローバル値 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: unset;
flex-flowの実例
それでは実際にflex-flowプロパティの書き方を見ていきましょう。以下の例は、単純な水平方向の主軸を持つフレックス・ボックスです。上の段のコンテナはアイテムを折り返す指定、下の段のコンテナはアイテムを折り返さない指定になっています。
resizeに対応しているブラウザであれば、コンテナのサイズを変更できます。コンテナの右下に表示されるハンドルを掴んで、横幅を伸縮させてみてください。
<h2>flex-flow: row wrap;</h2>
<div class="flex_box ff_1">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
<h2>flex-flow: row nowrap;</h2>
<div class="flex_box ff_2">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
h2 {
margin-top: 1rem;
font-size: 1rem;
}
.flex_box {
overflow: auto;
display: flex;
gap: 1rem;
margin-top: 1rem;
padding: 1rem;
background: #eee;
resize: horizontal;
}
.flex_item {
width: 100px;
padding: .3rem;
background: #09f;
color: #fff;
flex: 1 1 auto;
}
.ff_1 {
flex-flow: row wrap;
}
.ff_2 {
flex-flow: row nowrap;
}
続いて、垂直方向の主軸を持つコンテナの挙動です。アイテムは縦に並びますが、コンテナの寸法が縮まって空き領域が無くなった時にレイアウトを変えて収めようとするのか、そのままにするのかを指定できます。先ほどのサンプルと同じように、コンテナの右下に表示されているハンドルを上下に操作して、コンテナの高さを変えてみてください。
フレックス・アイテムの並び方や折り返しは、ボックスの寸法やコンテンツがはみ出した時の挙動に関する指定によって大きく変わります。これらは複数のプロパティの相互作用によって成立するものなので、関連するプロパティの機能も必用に応じて理解を深めてください。
<h2>flex-flow: column wrap;</h2>
<div class="flex_box ff_1">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
<h2>flex-flow: column nowrap;</h2>
<div class="flex_box ff_2">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
h2 {
margin-top: 1rem;
font-size: 1rem;
}
.flex_box {
overflow: auto;
display: flex;
gap: 1rem;
margin-top: 1rem;
padding: 1rem;
background: #eee;
resize: vertical;
}
.flex_item {
padding: .3rem;
background: #09f;
color: #fff;
flex: 1 1 auto;
}
.ff_1 {
flex-flow: column wrap;
}
.ff_2 {
flex-flow: column nowrap;
}