CSSでウェブページのレイアウトを作成する時に便利なFlexboxですが、よく使うパターンをいくつかまとめてみたいと思います。CSSにはいろんな配置に関するプロパティがありますが、Flexboxは全体のレイアウトから個別のUI要素のレイアウトまで幅広い部分で活用できます。特に近年のウェブサイトコーディングではレスポンシブであるのが必須になっているということもあり、Flexboxではその部分も特に強いとされています。ぜひ使いこなせるようにしたいですね。   過去にもFlexboxに関する基本的なことをまとめておりますので、こちらの記事も合わせてご参考ください。 （参考記事） ・CSSのFlexboxレイアウトをマスターするためのまとめ（Flexコンテナー編） ・CSSのFlexboxレイアウトをマスターするためのまとめ（Flexアイテム編）  

マルチカラムボックス

コンテンツを複数列で均等幅に配置する時の方法です。列の数はデザインによって様々ですが基本的にはフレックスアイテムの幅を変えてあげることで調整が可能です。HTMLはこのようなサンプルを使います。ここでは3カラムのボックスを並べるようになっています。 【HTML（Pug）】

div.flex-container
  div.flex-item.
    カラム1
  div.flex-item.
    カラム2
  div.flex-item.
    カラム3

  CSSでは、フレックスコンテナ要素に水平軸の並びを指定するプロパティを「justify-content: space-between;」と設定します。折り返し指定をしておくと画面幅が狭くなった時に複数行の配置に切り替えることができます。ただし、均等割に配置されるので注意が必要です。そしてフレックスアイテムには幅指定をしておきますが、この際にカラム間に均等な余白が入るようにその分の幅を引いておくのがポイントです。 【CSS（SASS）】

.flex-container
  display: flex
  justify-content: space-between
  flex-wrap: wrap
  .flex-item
    flex-basis: calc(33.3333% - 16px)

  上記で作成したサンプルはこのようになります。ここでは2カラム〜12カラムまで作成しています。

See the Pen multi-column-box_by_flexbox by designsupply (@designsupply) on CodePen.

今回のポイントとなるフレックスアイテムの幅指定ですが、下記の通りカラム数によってカラム幅と余白分の幅がそれぞれ変わります。下記ではカラム間の余白を24pxに設定した場合の一覧になります。カラム間の余白はデザインに合わせて適宜設定しますが、できるだけ綺麗に割り切れるようになる数値で行うのが好ましいですね。

2カラム	flex-basis: calc(50% - 12px);
3カラム	flex-basis: calc(33.3333% - 16px);
4カラム	flex-basis: calc(25% - 18px);
5カラム	flex-basis: calc(20% - 19.2px);
6カラム	flex-basis: calc(16.6666% - 20px);
8カラム	flex-basis: calc(12.5% - 21px);
10カラム	flex-basis: calc(10% - 21.6px);
12カラム	flex-basis: calc(8.3333% - 22px);

※カラム間のマージンは24pxで全カラムが均等な幅を前提とする  

ヘッダー型コンテンツ

Flexboxでは1行内に収まるレイアウトの設定を得意としています。その代表的なものがヘッダー型のコンテンツ要素ではないでしょうか。ここではよくあるような左側に単独の要素があり、それ以外は右側に全て配置されるというような例をみていきます。まずはHTMLですが、このように全ての要素をフレックスアイテムとなるようにします。 【HTML（Pug）】

header
  div.flex-container
    h1.flex-item LOGO
    a.flex-item Menu1
    a.flex-item Menu2
    a.flex-item Menu3
    a.flex-item Menu4

  続いてCSSです。本来ですとこれらが水平軸の並びを指定することでまとめて整列されるのですが、ポイントになるのはフレックスアイテムにはmarginが使えることです。特定方向のmargin値をautoに設定することで余白を設けることができ、設定した要素の配置を自動的に変えることができます。 【CSS（SASS）】

.flex-container
  display: flex
  align-items: center
  flex-wrap: wrap
  h1.flex-item
    margin: 0 auto 0 0
  a.flex-item
    margin: 0 0 0 12px

  こうすることで、このようなヘッダー型のコンテンツの並びも簡単に設定することができます。実際のサンプルはこちらになります。よく見かけるヘッダーのレイアウトになっていますね。

See the Pen header-content_by_flexbox by designsupply (@designsupply) on CodePen.

 

固定枠＆可変枠

Flexboxを使う例として他によくあるのは、可変の幅を持つ複数行のテキストエリアと、画像やリンクボタンなど固定の幅で表示される要素の組み合わせです。レスポンシブデザインにおいては全ての要素を可変にするというわけではなく、可変枠と固定枠を組み合わせるケースも多いかと思います。そんな時もFlexboxを使うことで解決できます。HTMLはこのようにフレックスアイテムを可変枠と固定枠の2つになるよう用意します。 【HTML（Pug）】

div.flex-container
  p.flex-item.
    可変枠に入るコンテンツです
  button.flex-item.
    固定枠となる要素です

  続いてCSS側では、フレックスコンテナには折り返しがされないように指定しておき、行内に収まるようにします。また垂直軸方向のレイアウト指定はデフォルトでは高い方のフレックスアイテムに合わせて引き延ばされるようになるので、それ以外の値を指定しておくと良いですね。 【CSS（SASS）】

.flex-container
  display: flex
  flex-wrap: nowrap
  align-items: center
  button.flex-item
  flex-shrink: 0

  さらにポイントとなるのが、上記のように固定枠となるフレックスアイテムには「flex-shrink: 0」を設定することです。こうすることで要素が縮まずに成り行きの幅を保持してくれるようになります。実際のサンプルはこのようになります。可変枠と固定枠の組み合わせは「行内に収める」と「flex-shrinkの指定」で対応することができますね。

See the Pen fix-and-fluid-content_by_flex by designsupply (@designsupply) on CodePen.

 

フルスクリーン内コンテンツ

近年のウェブサイトでは、コンテンツを全画面に表示するデザインも多くなってきています。特にファーストビューにおける場合にはヒーローヘッダーなどと呼ばれ、多くのサイトで採用されているようです。そんな全画面表示のコンテンツにおけるレイアウトもFlexboxを使うことで柔軟性と自由度が高いレイアウトを実現できます。今回は全画面表示での垂直軸方向のレイアウトを中心に見ていきます。まずはHTMLからです。今回はフレックスアイテムを垂直軸方向に配置させたい分だけ用意しています。 【HTML（Pug）】

div.flex-container
  div.flex-item.contents-top.
    全画面表示で画面上部に配置される要素です
  div.flex-item.contents-center.
    全画面表示で画面中央に配置される要素です
  div.flex-item.contents-bottom.
    全画面表示で画面下部に配置される要素です

  続いてCSSを見ていきましょう、全画面表示ということで、フレックスコンテナの幅と高さをそれぞれ画面いっぱいになるように設定しておきます。そしてポイントになるのが「flex-direction: column;」を設定することで、通常は水平軸が基準となるフレックスアイテムの並びを垂直軸を基準となるように変更しておきます。そしてこのように基準となる軸を変更した場合、「align-items」と「justify-content」の関係が逆になるので、垂直方向の並びを調整するために「justify-content: space-between;」と指定することで、垂直方向に要素が均等に配置されるようにしておきます。 【CSS（SASS）】

.flex-container
  width: 100%
  height: 100vh
  display: flex
  flex-direction: column
  justify-content: space-between

  これでベースとなるレイアウトができましたので、あとはデザインに合わせて各要素の配置を微調整していけばOKですね。実際に作成したサンプルはこちらになります。

See the Pen fullscreen-contents_by_flexbox by designsupply (@designsupply) on CodePen.

 

---

  今回はFlexboxを使ったウェブページコーディングでよく使うレイアウトパターンについてまとめてみました。過去にはfloatやpositionプロパティを使ってこのようなレイアウトが組まれることが多かったかもしれませんが、レスポンシブへの対応を考えるとやはりFlexboxを使った方法が良いかと思います。girdなどの新しいレイアウトに関するプロパティも登場していますが、Flexboxはとても柔軟性が高く全体の大まかなレイアウトから細部のレイアウトまで幅広く対応できるので使いやすいのではないでしょうか。   （こちらの記事もどうぞ） ・CSSのFlexboxレイアウトをマスターするためのまとめ（Flexコンテナー編） ・CSSのFlexboxレイアウトをマスターするためのまとめ（Flexアイテム編）