CSS Flexboxレイアウト

デザインカンプからHTMLやCSSでコーディングする際、各アイテムのレイアウトをコントロールしながら仕上げていきますが、そのレアイウト手法には、Flexboxレイアウト(display: flex;が指定された親要素(flexコンテナ)直下の子要素(flexアイテム)としてレイアウトをコントロールする手法)やGlidレイアウト(display: grid;が指定された親要素(gridコンテナ)直下の子要素(gridアイテム)としてレイアウトをコントロールする手法)が現在の制作現場では主流となっています。
今回の記事は、Flexboxレイアウトについてご紹介していきます。

Index

― 目次 ―

Flexboxレイアウトの特徴
Flexboxのレスポンシブ対応
Flexboxの軸とアイテムの整列方向
Flexboxのカラムレイアウト
calc()関数で指定のpxサイズから%サイズを計算する

Flexboxレイアウトの特徴

Flexboxレイアウトの特徴は、一方向の軸に沿ってアイテムを並べる「一次元のレイアウト」にあります。
1行の横並びだけではなく、折り返して複数行の横並びにする際にその利便性を発揮します。
Flexboxは、常に決められた軸の方向に沿って1列にアイテムが並ぶ特徴がありますので、要素の追加や削除などの変更に強く、成り行きでコンテンツを配置することの多いCMS環境下(※コンテンツの配置をリピートして表示するようなことが多い環境)での実装に有効であり、「軸に沿ってアイテムを並べる」といった仕様上の特徴から、上下方向や左右方向でアイテムの並び順を制御したい場合に使い勝手のよいレイアウト手法になります。

Flexboxのレスポンシブ対応

Flexboxレイアウトは、display: flex;が指定された親要素(flexコンテナ)直下の子要素(flexアイテム)としてレイアウトをコントロールできるようにする手法です。そのため、親要素にdisplay: flex;を適応する必要があります。この時点で、親要素の直下にある子要素は横並びになりますが、ブラウザ幅を狭めてもデバイス幅でカラム落ちしたり、複数カラムから単一カラムにはなってくれません(※モバイル端末向けに縦並びになってくれません)。これは、display: flex;を適応すると、初期値では1行横並びで表示されるようになっているためです。そのため「モバイル端末では縦並び・PC端末では横並び」にしたい場合、メディアクエリを使って設定を変更し、レスポンシブ対応する必要があります。
Flexboxレイアウトで縦並びと横並びを変更するには、flex-directionプロパティで主軸の方向を変更します。縦並び(上から下方向)にしたい場合は「flex-direction: column;」、横並び(左から右方向)にしたい場合は「flex-direction: row;」に設定します。

※PC端末で「モバイル表示：3カラムのまま」と「モバイル表示：1カラムに変更」の表示を確認する場合、ブラウザ幅を狭めてご覧ください。

― モバイル表示：3カラムのまま ―

アイテム1

アイテム2

アイテム3

― モバイル表示：1カラムに変更 ―

アイテム1

アイテム2

アイテム3

「モバイル表示：1カラムに変更」のHTMLとCSSについては、以下のソースをご参照ください。

<!-- コンテンツの表示領域 -->
<div class="contents_area">
<!-- Flexboxコンテナ -->
<div class="container">
<!-- Flexboxアイテム -->
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
</div>

</div>

[補足]
2行目～10行目のクラスcontents_areaは「コンテンツの表示領域」。
4行目～9行目のクラスcontainerは「Flexboxコンテナ」。
6行目～8行目のクラスitemは「Flexboxアイテム」。

/* コンテンツの表示領域 */
.contents_area {
  max-width: 1100px;
  margin: 0px auto;
}

/* Flexboxコンテナ */
/* SP/Tablet・共通表示 */
.container {
  display: flex; /* flexbox化 */
  flex-direction: column; /* 主軸を上から下に変更 */
  align-items: center; /* 交差軸方向に中央揃え */
  background: #c8c8c8;
  gap: 20px;
  padding: 20px;
}

/* PC表示 */
@media (min-width: 768px) {
  .container {
  flex-direction: row; /* 主軸を左から右に変更 */
  justify-content: center; /* 主軸方向に中央揃え */
  }
}

/* Flexboxアイテム */
.item {
  color: #ed1f7a;
  text-align: center;
  font-size: 0.95em;
  margin: 0px;
  padding: 50px 0px 50px 0px;
  width: 100%;
  border: 1px solid #ed1f7a;
  background: #ffffff;
}

/* コンテンツの表示領域 */

.contents_area {

max-width: 1100px;

margin: 0px auto;

}

/* Flexboxコンテナ */

/* SP/Tablet・共通表示 */

.container {

display: flex; /* flexbox化 */

flex-direction: column; /* 主軸を上から下に変更 */

align-items: center; /* 交差軸方向に中央揃え */

background: #c8c8c8;

gap: 20px;

padding: 20px;

}

/* PC表示 */

@media (min-width: 768px) {

.container {

flex-direction: row; /* 主軸を左から右に変更 */

justify-content: center; /* 主軸方向に中央揃え */

}

/* Flexboxアイテム */

.item {

color: #ed1f7a;

text-align: center;

font-size: 0.95em;

margin: 0px;

padding: 50px 0px 50px 0px;

width: 100%;

border: 1px solid #ed1f7a;

background: #ffffff;

}

[補足]
2～5行目でコンテンツの表示領域の内容を記述。
幅や表示位置などを指定します。

9～16行目でFlexboxコンテナの内容を記述。
10行目で親要素であるFlexboxコンテナに対して「display: flex;」を適応します。
11行目で「flex-direction: column;」を適応し、モバイル端末向けに主軸を上から下に変更します。
12行目で「align-items: center;」を適応し、交差軸方向に中央揃えにします。
※軸がcolumnの場合、左右方向を指定するのは「align-items: center;」になるため注意が必要です
14行目で「gap」を適応し、隣接するアイテム同士の間隔のみを指定します。
※アイテム同士が隣接していない面(上下や左右)に対しての間隔は適応されません

19～24行目でPC表示の内容を記述。
21行目で「flex-direction: row;」を適応し、PC端末向けに主軸を左から右に変更します。
22行目で「justify-content: center;」を適応し、主軸方向に中央揃えにします。
※軸がrowの場合、左右方向を指定するのは「justify-content: center;」になるため注意が必要です

27～36行目でFlexboxアイテムの内容を記述。

Flexboxの軸とアイテムの整列方向

上記の「Flexboxのレスポンシブ対応」でも説明していますが、Flexboxレイアウトで重要となってくるのが「軸」の概念です。
親要素であるFlexboxコンテナには「主軸」と「交差軸」があり、子要素であるFlexboxアイテムは、主軸に沿って並ぶようになっています。
justify-contentは、主軸方向の位置揃えをするためのプロパティですので、flex-direction: column;で主軸方向を上から下に変更すると、justify-content: center;では、左右中央揃えとしては機能しなくなってしまいます。
そのため、交差軸方向のアイテムの位置揃えには、align-itemsプロパティで設定します。主軸方向がcolumnになっている場合、左右方向は交差軸方向を制御するalign-items: center;とすることで、左右中央揃えを実現することができます。
flex-directionによる主軸方向の制御とそれに伴う位置揃えのプロパティの使い分けは、Flexboxレイアウトを行う上で重要な概念となります。

POINT

Flexboxアイテムは主軸に沿って並ぶ
主軸方向のアイテムの整列を指定するプロパティがjustify-content
主軸がrowの時、左右方向を設定するプロパティはjustify-content
主軸がcolumnの時、左右方向を設定するプロパティはalign-items

Flexboxのカラムレイアウト

Flexboxレイアウトでコーディングすると、CMSサイトでは多用することの多い「カラムレイアウト」を効率的に作成できるようになります。
また、親要素のFlexboxコンテナに「flex-direction」プロパティでモバイル端末には「column(1カラムの縦並びにする)」、PC端末には「row(横並びの複数カラムにする)」を適応することで、レスポンシブ対応も楽になります。
そして、Flexboxレイアウトの中でも一番利便性が高く効率的なのが、子要素のFlexboxアイテムに「calc()関数」を使用して、カラム数を固定したり、デバイス幅で切り替えることができる点です。
以下の「PC：3カラム・モバイル：1カラム」をサンプルに説明していきます(※モバイル端末では1カラムレイアウトにします)。

― PC：3カラム・モバイル：1カラム ―

「 PC：3カラム・モバイル：1カラム」のHTMLとCSSについては、以下のソースをご参照ください。

<!-- コンテンツの表示領域 -->
<div class="archive_contents">
<!-- Flexboxコンテナ -->
<ul class="archive_list">
<!-- Flexboxアイテム -->
<li class="archive_item">
<a href="#" class="archive_link">
<div class="thumbnail_img"><img src="サムネイル画像1のパス" alt="サムネイル画像1"></div>
<p class="archive_txt">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
</a>
</li>
<li class="archive_item">
<a href="#" class="archive_link">
<div class="thumbnail_img"><img src="サムネイル画像2のパス" alt="サムネイル画像2"></div>
<p class="archive_txt">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
</a>
</li>
<li class="archive_item">
<a href="#" class="archive_link">
<div class="thumbnail_img"><img src="サムネイル画像3のパス" alt="サムネイル画像3"></div>
<p class="archive_txt">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
</a>
</li>
</ul>
</div>

<p class="archive_txt">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>

</a>

</li>

<p class="archive_txt">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>

</a>

</li>

<p class="archive_txt">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>

</a>

</li>

</ul>

</div>

[補足]
2行目～25行目のクラスarchive_contentsは「コンテンツの表示領域」。
4行目～24行目のクラスarchive_listは「Flexboxコンテナ」。
6行目～23行目のクラスarchive_itemは「Flexboxアイテム」。

/* コンテンツの表示領域 */
.archive_contents {
  max-width: 1100px;
  margin: 0px auto;
  padding: 0px;
}

/* SP/Tablet：1カラム・共通表示 */
/* Flexboxコンテナ */
.archive_list {
  display: flex; /* flexbox化 */
  flex-direction: column; /* 縦並びにする */
  gap: 20px; /* アイテム間の余白を指定 */
}

/* Flexboxアイテム */
.archive_item {
  list-style-type: none;
}

/* PCでカラムを固定する場合 */
/* PC：2カラム */
@media (min-width: 768px) {
/* Flexboxコンテナ */
  .archive_list {
    flex-direction: row; /* 横並びにする */
    flex-wrap: wrap; /* 折り返して複数行にする */
  }
/* Flexboxアイテム */
  .archive_item {
    width: calc((100% - 20px) / 2); /* アイテムの幅を指定 */
  }
}

/* PC：3カラム */
@media (min-width: 768px) {
/* Flexboxコンテナ */
  .archive_list {
    flex-direction: row; /* 横並びにする */
    flex-wrap: wrap; /* 折り返して複数行にする */
  }
/* Flexboxアイテム */
  .archive_item {
    width: calc((100% - 40px) / 3); /* アイテムの幅を指定 */
 }
}

/* PC：4カラム */
@media (min-width: 768px) {
/* Flexboxコンテナ */
  .archive_list {
    flex-direction: row; /* 横並びにする */
    flex-wrap: wrap; /* 折り返して複数行にする */
  }
/* Flexboxアイテム */
  .archive_item {
    width: calc((100% - 60px) / 4); /* アイテムの幅を指定 */
  }
}

/* PCでデバイス幅ごとにカラムを変更する場合 */
/* PC：2カラム */
@media (min-width: 768px) {
/* Flexboxコンテナ */
  .archive_list {
    flex-direction: row; /* 横並びにする */
    flex-wrap: wrap; /* 折り返して複数行にする */
  }
/* Flexboxアイテム */
  .archive_item {
    width: calc((100% - 20px) / 2); /* アイテムの幅を指定 */
  }
}

/* PC：3カラム */
@media (min-width: 992px) {
/* Flexboxアイテム */
  .archive_item {
    width: calc((100% - 40px) / 3);
  }
}

/* PC：4カラム */
@media (min-width: 1100px) {
/* Flexboxアイテム */
  .archive_item {
    width: calc((100% - 60px) / 4);
  }
}

/* リンク領域：.archive_item内全てをリンク指定 */
a.archive_link {
  display: block;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  text-decoration: none;
}

/* マウスオーバー時のテキストカラー */
a.archive_link:hover {
  color: #ed1f7a;
}

/* サムネイル画像 */
.thumbnail_img {
  overflow: hidden;
}
.thumbnail_img img {
  max-width: none;
  width: 100%;
  border-radius: 5px 5px 0 0;
}

/* 説明文 */
.archive_txt {
  margin: 15px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

/* コンテンツの表示領域 */

.archive_contents {

max-width: 1100px;

margin: 0px auto;

padding: 0px;

}

/* SP/Tablet：1カラム・共通表示 */

/* Flexboxコンテナ */

.archive_list {

display: flex; /* flexbox化 */

flex-direction: column; /* 縦並びにする */

gap: 20px; /* アイテム間の余白を指定 */

}

/* Flexboxアイテム */

.archive_item {

list-style-type: none;

}

/* PCでカラムを固定する場合 */

/* PC：2カラム */

@media (min-width: 768px) {

/* Flexboxコンテナ */

.archive_list {

flex-direction: row; /* 横並びにする */

flex-wrap: wrap; /* 折り返して複数行にする */

}

/* Flexboxアイテム */

.archive_item {

width: calc((100% - 20px) / 2); /* アイテムの幅を指定 */

}

/* PC：3カラム */

@media (min-width: 768px) {

/* Flexboxコンテナ */

.archive_list {

flex-direction: row; /* 横並びにする */

flex-wrap: wrap; /* 折り返して複数行にする */

}

/* Flexboxアイテム */

.archive_item {

width: calc((100% - 40px) / 3); /* アイテムの幅を指定 */

}

/* PC：4カラム */

@media (min-width: 768px) {

/* Flexboxコンテナ */

.archive_list {

flex-direction: row; /* 横並びにする */

flex-wrap: wrap; /* 折り返して複数行にする */

}

/* Flexboxアイテム */

.archive_item {

width: calc((100% - 60px) / 4); /* アイテムの幅を指定 */

}

/* PCでデバイス幅ごとにカラムを変更する場合 */

/* PC：2カラム */

@media (min-width: 768px) {

/* Flexboxコンテナ */

.archive_list {

flex-direction: row; /* 横並びにする */

flex-wrap: wrap; /* 折り返して複数行にする */

}

/* Flexboxアイテム */

.archive_item {

width: calc((100% - 20px) / 2); /* アイテムの幅を指定 */

}

/* PC：3カラム */

@media (min-width: 992px) {

/* Flexboxアイテム */

.archive_item {

width: calc((100% - 40px) / 3);

}

/* PC：4カラム */

@media (min-width: 1100px) {

/* Flexboxアイテム */

.archive_item {

width: calc((100% - 60px) / 4);

}

/* リンク領域：.archive_item内全てをリンク指定 */

a.archive_link {

display: block;

border: 1px solid #dcdcdc;

border-radius: 5px;

text-decoration: none;

}

/* マウスオーバー時のテキストカラー */

a.archive_link:hover {

color: #ed1f7a;

}

/* サムネイル画像 */

.thumbnail_img {

overflow: hidden;

}

.thumbnail_img img {

max-width: none;

width: 100%;

border-radius: 5px 5px 0 0;

}

/* 説明文 */

.archive_txt {

margin: 15px;

}

[補足]
2～6行目でコンテンツの表示領域の内容を記述。
幅や表示位置などを指定します。

10～14行目でFlexboxコンテナの内容を記述。
11行目で親要素であるFlexboxコンテナに対して「display: flex;」を適応します。
12行目で「flex-direction: column;」を適応し、モバイル端末向けに縦並び(主軸を上から下)にします。
※「Flexboxのレスポンシブ対応」の箇所で、軸がcolumnの場合、左右中央揃えにするには「align-items: center;」を適応すると説明しましたが、今回は、Flexboxアイテムの幅を100%で分割しているため不要です
13行目で「gap」を適応し、隣接するアイテム同士の間隔のみを指定します。
※アイテム同士が隣接していない面(上下や左右)に対しての間隔は適応されません

PC端末で3カラム表示にしたい場合、36～46行目の内容を記述。
39行目で「flex-direction: row;」を適応し、PC端末向けに横並び(主軸を左から右)にします。
40行目で「flex-wrap: wrap;」を適応し、折り返して複数行の表示にも対応できるようにします。
これは、CMSとしてサイトを構築していく場合「1行目には3件、2行目には1件表示」というような場合も想定されるためです。

43～45行目でFlexboxアイテムの内容を記述。
44行目の「calc((100% – 40px) / 3)」でアイテムの幅(100%)と3カラム(3で割る)を指定し、アイテムごとの間隔の合計値である「40px」を差し引きます(※13行目で隣接するアイテム同士の間隔を「gap: 20px;」と指定していますので、3カラムの場合、隣接するアイテム同士の間隔は2つできるため「20px × 2 = 40px」となります)。
※PC端末で2カラム表示にしたい場合、23～33行目の内容を記述
※PC端末で4カラム表示にしたい場合、49～59行目の内容を記述

また、PCでデバイス幅ごとにカラムを変更することもできます。
※ブレイクポイント768pxで2カラム表示にしたい場合、63～73行目の内容を記述
※ブレイクポイント992pxで3カラム表示にしたい場合、76～81行目の内容を記述
※ブレイクポイント1100pxで4カラム表示にしたい場合、84～89行目の内容を記述

calc()関数で指定のpxサイズから%サイズを計算する

「Flexboxのカラムレイアウト」では、カラム数を指定してレイアウトを作成する方法を紹介しましたが、Flexboxアイテムの幅は、pxなどの固定値では指定しませんでした(※指定カラム数を均等配分しています)。
ですが、デザインカンプの内容によっては、PC表示の際、各Flexboxアイテムの横幅を固定値で指定したい場合があります。
「calc()関数で指定のpxサイズから%サイズを計算する」方法を使うことで、指定のデバイス幅までは固定サイズ、指定のデバイス幅からは可変サイズに変更させることができます。

※以下の「pxから%に値を変換し可変対応」のサンプルについては、デバイス幅が1100pxまでは各カラムを260pxの固定サイズに、1100px以下では可変対応としています。

― pxから%に値を変換し可変対応 ―

アイテム1

アイテム2

アイテム3

アイテム4

「pxから%に値を変換し可変対応」のHTMLとCSSについては、以下のソースをご参照ください。

<!-- Flexboxコンテナ -->
<div class="flex-container">
<!-- Flexboxアイテム -->
<div class="flex-item">
アイテム1
</div>
<div class="flex-item">
アイテム2
</div>
<div class="flex-item">
アイテム3
</div>
<div class="flex-item">
アイテム4
</div>
</div>

アイテム1

</div>

アイテム2

</div>

アイテム3

</div>

アイテム4

</div>

[補足]
2行目～16行目のクラスflex-containerは「Flexboxコンテナ」。
4行目～15行目のクラスflex-itemは「Flexboxアイテム」。

/* Flexboxコンテナ */
.flex-container {
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0px auto;
  padding: 0px;
}

/* Flexboxアイテム */
.flex-item {
  width:  calc((260 / 1100) * 100%); /* 23.6363% */
  padding: 50px 0px 50px 0px;
  color: #ed1f7a;
  text-align: center;
  font-size: 0.95em;
  background: #ffffff;
  border: 1px solid #ed1f7a;
}

/* Flexboxコンテナ */

.flex-container {

display: flex;

justify-content: space-between;

max-width: 1100px;

margin: 0px auto;

padding: 0px;

}

/* Flexboxアイテム */

.flex-item {

width: calc((260 / 1100) * 100%); /* 23.6363% */

padding: 50px 0px 50px 0px;

color: #ed1f7a;

text-align: center;

font-size: 0.95em;

background: #ffffff;

border: 1px solid #ed1f7a;

}

[補足]
2～8行目でFlexboxコンテナの内容を記述。
3行目で親要素であるFlexboxコンテナに対して「display: flex;」を適応します。
4行目でFlexboxコンテナ内にあるFlexboxアイテムを均等配置させるための「justify-content: space-between;」を適応します(※「justify-content: space-between;」は、最初の要素(アイテム)は左寄せ、最後の要素(アイテム)は右寄せ、それ以外の要素(アイテム)は均等な間隔で配置されます)。
5行目でFlexboxコンテナの幅を最大値で指定します。

11～19行目でFlexboxアイテムの内容を記述。
12行目でcalc()関数を使い、指定のpxサイズから%サイズを計算します。
Flexboxコンテナの幅が1100px、各カラムが260px、アイテム間の余白が20pxとなります。
px(各カラム260px)から%(23.6363%)に値を変換し可変対応しています。
アイテム間の余白は「1100px ÷ 260px = 4.2307」で4カラムとなりますので、「260px × 4カラム = 1040px」で4カラムの合計幅は1040pxとなり、「(1100px – 1040px) ÷ 3 = 20px」となります(※4カラムの場合、隣接するアイテム同士の間隔は3つできるため、3で割る)。

今回は「CSS Flexboxレイアウト」についてご紹介しました。
レイアウト方法の参考になりましたら幸いです。

CSS HTML