【できるじゃん】flexboxでflexアイテムを縦方向に折り返してみよう

こんにちは、Webプログラマーのトムです。

以前「flexboxはアイテムの横並びが簡単にできるからバリバリ使おう！」という記事を投稿しましたが、前からflexboxに対してずっと抱えてた疑問が、「flexboxは横方向の折り返しで良く使うけど、縦方向の折り返しってできるの？」でした。

グーグル先生で検索してみると、何となくできそうな記述をチラホラ見かけたものの、実際にサンプルを提示してたサイトは（私が検索した限りでは）見つかりませんでした。

だったら自分でやってみれば良いじゃん？ということで、やってみました。そしたら簡単にできました。

ということで今回はその解説をさせて頂きます。

初期費用無料、月額990円から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

flexアイテムを縦方向に折り返すコード　その１（シンプルパターン）
flexアイテムを縦方向に折り返すコード　その２（等間隔パターン）
1. 実行結果
応用編コード
1. 実行結果

flexアイテムを縦方向に折り返すコード　その１（シンプルパターン）

HTML

flexアイテムを記述する領域( flex-areaクラス)の中に、正方形(squareクラス)と、縦長の長方形(rectangleクラス)を交互に３つずつ、計６つの四角形を記述しています。四角形には順番がわかるように番号を上から昇順に付けています。また今回はリセットCSSを使用しています。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>flexbox 縦方向の折り返し</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="flex-area">
    <div class="square">
      <h1>1</h1>
    </div>
    <div class="rectangle">
      <h1>2</h1>
    </div>
    <div class="square">
      <h1>3</h1>
    </div>
    <div class="rectangle">
      <h1>4</h1>
    </div>
    <div class="square">
      <h1>5</h1>
    </div>
    <div class="rectangle">
      <h1>6</h1>
    </div>
  </div>

</body>

</html>

CSS

flex-areaクラスの領域を横600px、高さ800pxで定義しています（実行結果でグレーでぬられた領域)。この領域の中に6つの四角形が配置されます。正方形は赤色で250×250、長方形は青色で150×250で定義しています。

そしてflex-areaクラスに以下３つのプロパティを指定します。

display:flex：子要素をflexアイテムに指定するプロパティ　→　四角形がflexアイテムとして扱われます
flex-direction:column： flexアイテムを縦方向に並べるプロパティ
flex-wrap: wrap : flexアイテムの配置が自分の領域を超えそうになった時に折り返すプロパティ

h1 {
  color: white;
  text-align: center;
  padding-top: 50px;
  font-size: 72px;
}

.flex-area {
  width: 600px;
  margin: 0 auto;
  height: 800px;
  background-color: #777777;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.square {
  width: 250px;
  height: 250px;
  background-color: red;
}

.rectangle {
  width: 150px;
  height: 250px;
  background-color: blue;
}

初期費用無料、月額990円から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

実行結果

See the Pen flex-column-wrap_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

実行結果を見て頂くと分かる通り、3つ目の正方形から4つ目の長方形で下から上への折り返しがしっかりと行われていることが分かります。

flex-areaの高さは800pxです。四角形の高さは250pxなので3つで750pxとなり、下に50pxを余らせた状態で上への折り返しが行われています。また長方形（４）の横方向の開始位置はflex-areaの丁度真ん中であることも分かります。

flexアイテムを縦方向に折り返すコード　その２（等間隔パターン）

次にflex-areaクラスに、”justify-content:space-between”プロパティを追加してみます。このプロパティはflex-itemを等間隔に配置させる時に頻繁に用いられます。すると以下の結果となります。

実行結果

See the Pen flex-column-wrap_02 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

その１では詰めて配置されていた四角形の間にスペースが挿入され、縦方向で等間隔に配置されていることが分かります。

ついでにこのCSSを変更しないで、四角形を３つ増やした場合はどうなるのか試してみました。実行結果を見て頂ければわかりますが、flex-areaの横方向の領域をはみ出して四角形が配置されました。

See the Pen flex-column-wrap_03 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

ここまで試してみて当たり前の話を書くのですが、flexアイテムが配置される領域(=flex-area)の高さがCSSで指定されている(今回だとピクセルで指定されている）から、縦方向の折り返しが意図した形で行われます。この件に関連して、flex-areaのheightの指定をビューポート指定(vh)にしたときと、パーセント指定(%)にした時の動作を今回のコードで試してみたところ、結果は以下の通りでした。