flex-directionとflex-wrapを一括で指定できるflex-flowを解説

本記事では、flex-directionとflex-wrapを一括で指定できるflex-flowプロパティについて解説していきます。

この記事を読むことで、

「flex-flowってすごい便利！」

「flex-directionとflex-wrapの値を1行で書けるなんて知らなかった！」

と感じるはずです。

ぜひ最後までご覧ください。

1 flex-flowで出来ること
2 まとめ

flex-flowで出来ること

flex-flowはflex-directionとflex-wrapを1行で書くことができます。

flex-flowの書き方は以下のようになります。

flex-flow: flex-directionの値 flex-wrapの値;

flex-flowの初期値はrow nowrapになります。

flex-directionは、rowとrow-reverse、column、column-reverseの4種類。

flex-wrapは、wrapとnowrap、wrap-reverseの3種類。

flex-flowを用いることで、flex-directionの値とflex-wrapの値を組み合わせたものをサンプルコードと合わせて見ていきましょう。

flex-flow: row nowrap;

flex-flow: row nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: row nowrap;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: row wrap;

flex-flow: row wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: row wrap;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: row wrap-reverse;

flex-flow: row wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: row wrap-reverse;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: row wrap-reverse;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: row-reverse nowrap;

flex-flow: row-reverse nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row-reverse;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: row-reverse nowrap;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: row-reverse nowrap;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: row-reverse wrap;

flex-flow: row-reverse wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row-reverse;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: row-reverse wrap;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: row-reverse wrap;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: row-reverse wrap-reverse;

flex-flow: row-reverse wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row-reverse;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: row-reverse wrap-reverse;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: column nowrap;

flex-flow: column nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: column nowrap;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: column wrap;

flex-flow: column wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  height: 120px;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: column wrap;

width: 100%;

height: 120px;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: column wrap-reverse;

flex-flow: column wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: column wrap-reverse;
  width: 100%;
  height: 120px;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: column wrap-reverse;

width: 100%;

height: 120px;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: column-reverse nowrap;

flex-flow: column-reverse nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column-reverse;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: column-reverse nowrap;
  width: 100%;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: column-reverse nowrap;

width: 100%;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: column-reverse wrap;

flex-flow: column-reverse wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column-reverse;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: column-reverse wrap;
  width: 100%;
  height: 120px;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: column-reverse wrap;

width: 100%;

height: 120px;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

flex-flow: column-reverse wrap-reverse;

flex-flow: column-reverse wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column-reverse;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-flow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
    <div class="item">box4</div>
    <div class="item">box5</div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

.container {
  display: flex;
  flex-flow: column-reverse wrap-reverse;
  width: 100%;
  height: 120px;
}

.item {
  width: 30%;
  height: 50px;
  background: yellow;
}

.item:nth-of-type(odd) {
  background: yellowgreen;
}

.container {

display: flex;

flex-flow: column-reverse wrap-reverse;

width: 100%;

height: 120px;

}

.item {

width: 30%;

height: 50px;

background: yellow;

}

.item:nth-of-type(odd) {

background: yellowgreen;

}

まとめ

いかがだったでしょうか？

flex-flowについて理解できたでしょうか？

flex-flowを使いこなすためには、まずflex-directionとflex-wrapを理解する必要があります。

flex-directionとflex-wrapを使いこなせるようになってから、flex-flowを使ってみてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。