CSSのflex-flowで配置調整やレスポンシブに対応したレイアウトを実現する方法をわかりやすく解説

flex-flowプロパティは、flex-directionとflex-wrapの2つのプロパティを一括で指定できる短縮プロパティです。Flexboxレイアウトにおいて、アイテムが並ぶ方向と、その折り返しの動作をまとめて管理できます。

flex-flowの値とその効果の一覧

row nowrap: アイテムを横方向に並べ、折り返さない。
row wrap: アイテムを横方向に並べ、必要に応じて折り返す。
column nowrap: アイテムを縦方向に並べ、折り返さない。
column wrap: アイテムを縦方向に並べ、必要に応じて折り返す。

注意点と関連情報

flex-flowはflex-directionとflex-wrapを同時に指定できる便利なプロパティです。例えば、flex-flow: row nowrap;と指定すると、アイテムは横方向に並び、折り返さずに1行に収まります。これに対して、wrapを使うと、コンテナの幅を超えた場合に折り返されます。

flex-flowプロパティが効かない時の原因と対策

display: flex;が親要素に指定されていない

flex-flowプロパティは、フレックスコンテナの子要素に対して機能しますが、親要素にdisplay: flex;が指定されていない場合、このプロパティは適用されません。
対策: 親要素にdisplay: flex;が設定されていることを確認してください。フレックスレイアウトを有効にすることで、flex-flowが機能します。

flex-wrapの効果が確認できない

flex-flowにnowrapが指定されている場合、子要素は1行に収まるため、折り返しが発生しません。また、親要素の幅が十分広い場合、wrapを指定していても折り返しが発生しないため、効果が見られないことがあります。
対策: wrapやwrap-reverseを指定した場合は、親要素の幅が狭いか、子要素が広く配置される状況であるか確認してください。親要素のサイズを調整して折り返しが発生するようにします。

共通するCSSコード

.css-sample-container {
  display: flex;
  background-color: #f0f0f0;
  padding: 10px;
  width: 100%;
  max-width: 600px;
  max-height: 300px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  gap: 10px;
}

.css-sample-box {
  background-color: #ffcc99;
  padding: 10px;
  text-align: center;
  border: 1px solid #999;
  width: 100px;
  height: 80px;
}

flex-flow: row nowrap

アイテムが横方向に並び、折り返さない例です。

HTMLコード

<div class="css-sample-container flex-row-nowrap">
  <div class="css-sample-box">Box 1</div>
  <div class="css-sample-box">Box 2</div>
  <div class="css-sample-box">Box 3</div>
  <div class="css-sample-box">Box 4</div>
  <div class="css-sample-box">Box 5</div>
</div>

CSSコード

.flex-row-nowrap {
  flex-flow: row nowrap;
}

表示結果

Box 1

Box 2

Box 3

Box 4

Box 5

flex-flow: row wrap

アイテムが横方向に並び、必要に応じて折り返す例です。

HTMLコード

<div class="css-sample-container flex-row-wrap">
  <div class="css-sample-box">Box 1</div>
  <div class="css-sample-box">Box 2</div>
  <div class="css-sample-box">Box 3</div>
  <div class="css-sample-box">Box 4</div>
  <div class="css-sample-box">Box 5</div>
</div>

CSSコード

.flex-row-wrap {
  flex-flow: row wrap;
}

表示結果

Box 1

Box 2

Box 3

Box 4

Box 5

flex-flow: column nowrap

アイテムが縦方向に並び、折り返さない例です。

HTMLコード

<div class="css-sample-container flex-column-nowrap">
  <div class="css-sample-box">Box 1</div>
  <div class="css-sample-box">Box 2</div>
  <div class="css-sample-box">Box 3</div>
  <div class="css-sample-box">Box 4</div>
  <div class="css-sample-box">Box 5</div>
</div>

CSSコード

.flex-column-nowrap {
  flex-flow: column nowrap;
}

表示結果

Box 1

Box 2

Box 3

Box 4

Box 5

flex-flow: column wrap

アイテムが縦方向に並び、必要に応じて折り返す例です。

HTMLコード

<div class="css-sample-container flex-column-wrap">
  <div class="css-sample-box">Box 1</div>
  <div class="css-sample-box">Box 2</div>
  <div class="css-sample-box">Box 3</div>
  <div class="css-sample-box">Box 4</div>
  <div class="css-sample-box">Box 5</div>
</div>

CSSコード

.flex-column-wrap {
  flex-flow: column wrap;
}

表示結果

Box 1

Box 2

Box 3

Box 4

Box 5

まとめ

flex-flowは、flex-directionとflex-wrapを一括で指定するプロパティ。
row nowrap: アイテムを横方向に並べ、折り返さない。
row wrap: アイテムを横方向に並べ、折り返す。
column nowrap: アイテムを縦方向に並べ、折り返さない。
column wrap: アイテムを縦方向に並べ、折り返す。