「flexアイテムの折り返しと並ぶ方向を同時に指定したい」と思うことはありませんか？
基本的にflexアイテムの折り返しは flex-wrap、並ぶ方向の指定は flex-direction をそれぞれ使用しますが、別々のプロパティを記述するのは少し手間です。
そのようなときはflex-flowを使用すれば、たった1つのプロパティを記述するだけでflexアイテムの方向と折り返しを同時に指定できます。
この記事では flex-flow の使い方を解説します。ぜひ学習にお役立てください。
- flex-flowの基本形
- flex-flowのレイアウトサンプル
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
CSSのレイアウト作成は全体的に理解することが大切です。特にFlexboxは使用する頻度が高いので、ひとつのプロパティだけでなく関連するプロパティも調べておきましょう。
Flexboxについてはこちらの記事でまとめていますので、ぜひ参考にしてください。
目次
flex-flowとは
flex-flowは、flexアイテムの並び方と折り返しを同時に指定できるプロパティです。
flexアイテムの並び方は flex-direction、flexアイテムの折り返しは flex-wrapを使用しますが、flex-flow を使えばこの2つのプロパティを同時に指定できます。2つのプロパティを使うよりも記述が簡単なので、覚えておくとよいでしょう。
flex-flowのレイアウトサンプル
flex-flow はflexアイテムに対して有効なプロパティであるため、display: flex;と一緒にflexコンテナ（親要素）に指定します。
以下がCSSの基本形です。
.flexbox {
display: flex;
flex-flow: flex-wrapの値 flex-directionの値;
}flex-flow には値を2つ、半角スペース区切りで指定します。指定する順番は特にありませんので、どちらを先に記述しても構いません。
flex-flow に指定可能な値については次の項目で解説します。
flex-flowの使い方
flex-flow はflexアイテムが並ぶ方向と折り返しを同時に指定するプロパティです。
flex-flow に指定できる値は、flex-wrap と flex-direction に指定する値と同じです。
| flex-flowの値 | |||
| flex-wrapの値 | flex-directionの値 | ||
| nowrap（初期値） | flexアイテムを折り返さない | row（初期値） | flexアイテムを左から右に並べる |
| wrap | flexアイテムを折り返す | row-reverse | flexアイテムを右から左に並べる |
| wrap-reverse | flexアイテムを逆順で折り返す | column | flexアイテムを縦並びにする |
| column-reverse | flexアイテムを縦並びにして下から上に並べる | ||
flex-wrap は基本的に上の値を2つ組み合わせて使用しますが、折り返しのみ・方向のみを指定するときは1つの値だけ指定することも可能です。例えば折り返しのみを指定したいときは、flex-flow: wrap;のように記述します。
以下の項目では折り返しと方向を同時に指定する場合について解説します。
wrap + row-reverse（折り返しと右寄せで逆順）
flexアイテムを折り返しつつ逆並びにするには、flex-flow: wrap row-reverse;を指定します。
以下が記述例です。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
</div>CSSの記述
.flexbox {
display: flex;
flex-flow: wrap row-reverse; /*flexアイテムの折り返しと逆並びを指定*/
text-align: center;
height: 100px;
border: 1px solid #000;
}
.flex-item {
background: orange;
border: 1px solid #000;
width: 40%;
height: 40%;
/*flexアイテムのテキストを中央に配置する指定*/
display: flex;
justify-content: center;
align-items: center;
}出力結果
wrap + column（折り返しと縦並び）
flexアイテムを折り返しつつ縦並びにするには、flex-flow: wrap column;を指定します。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
</div>CSSの記述
.flexbox {
display: flex;
flex-flow: wrap column; /*flexアイテムの折り返しと縦並び*/
text-align: center;
height: 100px;
boeder: 1px solid #000;
}
.flex-item {
background: orange;
border: 1px solid #000;
width: 40%;
height: 40%;
/*flexアイテムのテキストを中央に配置する指定*/
display: flex;
justify-content: center;
align-items: center;
}出力結果
wrap + column-reverse（折り返しと縦並びの逆順）
flexアイテムを折り返しつつ縦並びの逆順にするには、flex-flow: wrap column-reverse;を指定します。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
</div>CSSの記述
.flexbox {
display: flex;
flex-flow: wrap column-reverse; /*flexアイテムの折り返しと縦並び、下から上に並べる*/
text-align: center;
height: 100px;
boder: 1px solid #000;
}
.flex-item{
border: 1px solid #000;
width: 40%;
height: 40%;
/*flexアイテムのテキストを中央に配置する指定*/
display: flex;
justify-content: center;
align-items: center;
}出力結果
wrap-reverse + row-reverse（逆順の折り返しと右寄せで逆順）
flexアイテムを逆順で折り返しつつ逆並びにするには、flex-flow: wrap-reverse row-reverse;を指定します。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
</div>CSSの記述
.flexbox {
display: flex;
flex-flow: wrap-reverse row-reverse; /*flexアイテムを逆に折り返し、逆並び*/
text-align: center;
height: 100px;
boeder: 1px solid #000;
}
.flex-item {
background: orange;
border: 1px solid #000;
width: 40%;
/*flexアイテムのテキストを中央に配置する指定*/
display: flex;
justify-content: center;
align-items: center;
}出力結果
wrap-reverse + column（逆順の折り返しと縦並び）
flexアイテムを逆順で折り返しつつ縦並びにするには、flex-flow: wrap-reverse column;を指定します。
HTMLの記述
<div class="flexbox">
<div class="flex-item01">①</div>
<div class="flex-item02">②</div>
<div class="flex-item03">③</div>
<div class="flex-item04">④</div>
</div>CSSの記述
.flexbox {
display: flex;
flex-flow: wrap-reverse column;/*flexアイテムを逆に折り返し、縦並び*/
text-align: center;
height: 100px;
border: 1px solid #000;
}
.flex-item {
border: 1px solid #000;
width: 40%;
height: 40%;
/*flexアイテムのテキストを中央に配置する指定*/
display: flex;
justify-content: center;
align-items: center;
}出力結果
wrap-reverse + column-reverse（逆順の折り返しと縦並びの逆順）
flexアイテムを逆順で折り返しつつ下から並べるには、flex-flow: wrap-reverse column-reverse;を使用します。
HTMLの記述
<div class="flexbox">
<div class="flex-item01">①</div>
<div class="flex-item02">②</div>
<div class="flex-item03">③</div>
<div class="flex-item04">④</div>
</div>CSSの記述
.flexbox {
display: flex;
flex-flow: wrap-reverse column-reverse; /*flexアイテムを逆に折り返し、縦並びで下から上に並べる*/
text-align: center;
height: 100px;
border: 1px solid #000;
}
.flex-item {
border: 1px solid #000;
width: 40%;
height: 40%;
/*flexアイテムのテキストを中央に配置する指定*/
display: flex;
justify-content: center;
align-items: center;
}出力結果
まとめ
flex-flow はflexアイテムの折り返しと並ぶ方向を同時に指定するプロパティです。flex-flow を使用すればコードの記述量が減り、効率よくコーディングを行えます。
flex-flowまとめ
- flexアイテムの折り返しと並ぶ方向を指定するプロパティ
display: flex;と併用する- 使用できる値は flex-wrap と flex-direction のときと同じ
- 値は半角スペース区切りで指定する
- 1つの値だけを指定することも可能
関連記事
flex-flow で使用する値は flex-wrap, flex-direction の値と同じものです。それぞれのプロパティについての解説記事がありますので、参考にしてください。
flex-wrap解説記事
flex-direction解説記事
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
