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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

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

HTML

flexアイテムを記述する領域( flex-areaクラス)の中に、正方形(squareクラス)と、縦長の長方形(rectangleクラス)を交互に3つずつ、計6つの四角形を記述しています。四角形には順番がわかるように番号を上から昇順に付けています。また今回はリセット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クラスに以下3つのプロパティを指定します。

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

実行結果

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

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

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

スポンサーリンク

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

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

実行結果

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

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

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

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

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

  • ビューポート指定・・・折り返される
  • パーセント指定・・・折り返されない

パーセント指定の場合に折り返されなかったのは、flex-areaの親要素が高さが未定義であるbodyタグになるため、高さの指定をflex-areaも持たない形になったためと考えられます。

応用編コード

今回試したflexアイテムの縦方向の折り返しを実際に使えそうなシーンを考えてみました。例えば「4つの画像を上下左右に配置するが、縦方向を少しだけずらして表示する」というデザインが仕様にあった場合に使えます。↓に実行結果を示します(ソースコードも修正してます。codepen上で確認下さい)

実行結果

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

今回、flexboxでのflexアイテムを縦方向の折り返しを試してみました。今回のようにHTML&CSSで疑問に思ったことは、今後も積極的に試してみたいと思っています。

今回は以上です。

タイトルとURLをコピーしました