ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】flexアイテムの折り返しと方向を同時に指定！flex-flowの使い方とレイアウトサンプル

【CSS】flexアイテムの折り返しと方向を同時に指定！flex-flowの使い方とレイアウトサンプル

HTML/CSS

2022/05/09

2023/05/06

「flexアイテムの折り返しと並ぶ方向を同時に指定したい」と思うことはありませんか？

基本的にflexアイテムの折り返しは flex-wrap、並ぶ方向の指定は flex-direction をそれぞれ使用しますが、別々のプロパティを記述するのは少し手間です。

そのようなときはflex-flowを使用すれば、たった1つのプロパティを記述するだけでflexアイテムの方向と折り返しを同時に指定できます。

この記事では flex-flow の使い方を解説します。ぜひ学習にお役立てください。

この記事で身につく内容

flex-flowの基本形
flex-flowのレイアウトサンプル

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSSのレイアウト作成は全体的に理解することが大切です。特にFlexboxは使用する頻度が高いので、ひとつのプロパティだけでなく関連するプロパティも調べておきましょう。

Flexboxについてはこちらの記事でまとめていますので、ぜひ参考にしてください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

flex-flowとは
flex-flowのレイアウトサンプル
flex-flowの使い方
まとめ

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;
}

出力結果