カードを横方向に均等に並べる方法(Flexbox)｜3種類の間隔指定 | ◯ひno-te

Flexboxを使って、横並びの3枚のカードを均等な間隔で配置する方法を紹介します。gapがカード同士の間隔を数値で指定するのに対し、justify-contentは親要素内の残りの空きスペースを分配して配置を調整します。この記事では、space-between・space-around・space-evenlyによる3種類の間隔指定を、実際のデモで比較できます。

各パターンには完成イメージとHTML・CSSのコードを掲載しています。カード同士の間隔や左右両端の余白の違いがわかり、目的に合った配置のコードをコピーして使用できます。デモ内の矢印は余白を示すための補助表示で、掲載しているコードには含まれていません。

この記事では横並びの配置を扱います。3枚のカードを縦一列に並べて間隔を調整したい場合は、カードを縦方向に均等に並べる方法｜3種類の間隔指定をご覧ください。

横並びのカードを均等に配置するデモとコード

※デモ内の矢印は、カード間や左右両端の余白をわかりやすく示すための補助表示です。実際のカード配置に矢印は必要ありません。掲載しているHTML・CSSのコードにも矢印は含まれていません。

① space-between

justify-content: space-between; は、最初のカードを左端、最後のカードを右端に配置し、カード同士の間隔を均等にする指定です。左右の端には余白を作らず、カードとカードの間だけに均等な空間を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- 画面幅に合わせて表示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>横並びのカードを両端から均等な間隔で配置</title>
  <!-- CSSファイルを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- space-betweenで配置する3枚のカード -->
  <div class="flexbox-row-spacing_between">
    <div class="flexbox-row-spacing_card"></div>
    <div class="flexbox-row-spacing_card"></div>
    <div class="flexbox-row-spacing_card"></div>
  </div>
</body>
</html>

/* 親コンテナ */
.flexbox-row-spacing_between {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  justify-content: space-between; /* 両端に配置し、カード間を均等にする */
  align-items: flex-start; /* カードを上に配置 */
  gap: 0; /* カード同士の追加間隔 */
  width: 100%; /* 親コンテナの横幅 */
  height: 300px; /* 親コンテナの高さ */
  border: 1px solid #cbd5e1; /* 外枠 */
  border-radius: 0; /* 角丸なし */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を幅と高さに含める */
  overflow: hidden; /* はみ出しを防ぐ */
}

/* 子カード共通 */
.flexbox-row-spacing_card {
  width: 60px; /* カードの横幅 */
  height: 50px; /* カードの高さ */
  flex-shrink: 0; /* カードの縮小を防ぐ */
}

/* 1枚目：パステルブルー */
.flexbox-row-spacing_card:nth-child(1) {
  background: #93c5fd; /* 背景色 */
}

/* 2枚目：パステルピンク */
.flexbox-row-spacing_card:nth-child(2) {
  background: #f9a8d4; /* 背景色 */
}

/* 3枚目：パステルグリーン */
.flexbox-row-spacing_card:nth-child(3) {
  background: #86efac; /* 背景色 */
}

② space-around

justify-content: space-around; は、各カードの左右に同じ大きさの余白を割り当てる指定です。隣り合うカードの間には、それぞれの余白が合わさるため、コンテナの左右両端の余白はカード間の半分の広さになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- 画面幅に合わせて表示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>横並びのカードの左右に均等な余白を作る</title>
  <!-- CSSファイルを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- space-aroundで配置する3枚のカード -->
  <div class="flexbox-row-spacing_around">
    <div class="flexbox-row-spacing_card"></div>
    <div class="flexbox-row-spacing_card"></div>
    <div class="flexbox-row-spacing_card"></div>
  </div>
</body>
</html>

/* 親コンテナ */
.flexbox-row-spacing_around {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  justify-content: space-around; /* 各カードの左右に均等な余白を割り当てる */
  align-items: flex-start; /* カードを上に配置 */
  gap: 0; /* カード同士の追加間隔 */
  width: 100%; /* 親コンテナの横幅 */
  height: 300px; /* 親コンテナの高さ */
  border: 1px solid #cbd5e1; /* 外枠 */
  border-radius: 0; /* 角丸なし */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を幅と高さに含める */
  overflow: hidden; /* はみ出しを防ぐ */
}

/* 子カード共通 */
.flexbox-row-spacing_card {
  width: 60px; /* カードの横幅 */
  height: 50px; /* カードの高さ */
  flex-shrink: 0; /* カードの縮小を防ぐ */
}

/* 1枚目：パステルブルー */
.flexbox-row-spacing_card:nth-child(1) {
  background: #93c5fd; /* 背景色 */
}

/* 2枚目：パステルピンク */
.flexbox-row-spacing_card:nth-child(2) {
  background: #f9a8d4; /* 背景色 */
}

/* 3枚目：パステルグリーン */
.flexbox-row-spacing_card:nth-child(3) {
  background: #86efac; /* 背景色 */
}

③ space-evenly

justify-content: space-evenly; は、カード同士の間隔と、コンテナの左右両端の余白をすべて同じ広さにする指定です。左端から最初のカードまで、カードとカードの間、最後のカードから右端まで、すべての間隔が均等になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- 画面幅に合わせて表示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>横並びのカードと両端の間隔をすべて均等にする</title>
  <!-- CSSファイルを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- space-evenlyで配置する3枚のカード -->
  <div class="flexbox-row-spacing_evenly">
    <div class="flexbox-row-spacing_card"></div>
    <div class="flexbox-row-spacing_card"></div>
    <div class="flexbox-row-spacing_card"></div>
  </div>
</body>
</html>

/* 親コンテナ */
.flexbox-row-spacing_evenly {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  justify-content: space-evenly; /* カード間と両端の余白をすべて均等にする */
  align-items: flex-start; /* カードを上に配置 */
  gap: 0; /* カード同士の追加間隔 */
  width: 100%; /* 親コンテナの横幅 */
  height: 300px; /* 親コンテナの高さ */
  border: 1px solid #cbd5e1; /* 外枠 */
  border-radius: 0; /* 角丸なし */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を幅と高さに含める */
  overflow: hidden; /* はみ出しを防ぐ */
}

/* 子カード共通 */
.flexbox-row-spacing_card {
  width: 60px; /* カードの横幅 */
  height: 50px; /* カードの高さ */
  flex-shrink: 0; /* カードの縮小を防ぐ */
}

/* 1枚目：パステルブルー */
.flexbox-row-spacing_card:nth-child(1) {
  background: #93c5fd; /* 背景色 */
}

/* 2枚目：パステルピンク */
.flexbox-row-spacing_card:nth-child(2) {
  background: #f9a8d4; /* 背景色 */
}

/* 3枚目：パステルグリーン */
.flexbox-row-spacing_card:nth-child(3) {
  background: #86efac; /* 背景色 */
}

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

今回の3つのサンプルは、それぞれHTMLとCSSの2つのファイルで構成されています。 HTMLには親コンテナと3枚のカードを記述し、CSSではカードの横並びや間隔の指定、サイズ、背景色などを設定しています。各サンプルは独立しているため、使用したい間隔指定を1つ選んで利用できます。JavaScriptは必要ありません。

sample/
  ├── index.html
  └── style.css

各ファイルの役割
index.htmlには、3枚のカードをまとめる親コンテナと、それぞれの子カードを記述しています。親コンテナのクラス名は間隔指定ごとに異なり、space-betweenではflexbox-row-spacing_between、space-aroundではflexbox-row-spacing_around、space-evenlyではflexbox-row-spacing_evenlyを使用しています。 style.cssには、カードを横並びにする設定と、選択した方法で余白を割り当てるためのCSSを記述しています。

設置方法・使い方
使用したい間隔指定の「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。 sampleフォルダ内のindex.htmlとstyle.cssを同じ階層に配置し、index.htmlをブラウザで開くと、選択した間隔指定で3枚のカードが表示されます。各ZIPには選択したパターンのコードだけが含まれるため、3種類すべてをダウンロードする必要はありません。

横並びと間隔を指定する方法
親コンテナにはdisplay: flex;とflex-direction: row;を指定しています。これにより、3枚のカードが左から右へ横一列に並びます。横並びの場合、justify-contentが左右方向の配置や余白の割り当てを担当し、align-itemsが上下方向の配置を担当します。今回はalign-items: flex-start;を共通で指定しているため、3枚のカードは親コンテナの上側に配置されます。次のコードは「① space-between」の指定です。

/* 親コンテナ */
.flexbox-row-spacing_between {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  justify-content: space-between; /* 両端に配置し、カード間を均等にする */
  align-items: flex-start; /* カードを上に配置 */
  gap: 0; /* カード同士の追加間隔 */
  width: 100%; /* 親コンテナの横幅 */
  height: 300px; /* 親コンテナの高さ */
  border: 1px solid #cbd5e1; /* 外枠 */
  border-radius: 0; /* 角丸なし */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を幅と高さに含める */
  overflow: hidden; /* はみ出しを防ぐ */
}

間隔の割り当て方を変更するときは、justify-contentの値を変更します。 space-between・space-around・space-evenlyの3種類を使い分けることで、カード同士の間隔と左右両端の余白を調整できます。カードのHTMLやflex-direction: row;を変更する必要はありません。

3パターンの間隔指定
3枚のカードを横並びにする設定は、すべてのパターンで共通です。違いはjustify-contentによる余白の割り当て方です。それぞれ次のように指定します。

/* 3パターン共通 */
display: flex;
flex-direction: row;
align-items: flex-start;

/* ① space-between：カード間だけを均等にする */
justify-content: space-between;

/* ② space-around：各カードの左右に同じ余白を割り当てる */
justify-content: space-around;

/* ③ space-evenly：カード間と左右両端をすべて均等にする */
justify-content: space-evenly;

space-betweenは最初のカードを左端、最後のカードを右端に配置し、カード同士の間に均等な余白を作ります。
space-aroundは各カードの左右に同じ余白を割り当てます。隣り合うカードの間では2つの余白が合わさるため、左右両端の余白はカード間の半分になります。
space-evenlyは、左端から最初のカードまで、カード同士の間、最後のカードから右端まで、すべて同じ広さの余白を作ります。

カード同士の間隔を変更する方法
今回はgap: 0;を指定し、justify-contentだけで余白を割り当てています。カード同士に一定の間隔を追加したい場合は、例えばgap: 20px;に変更すると、隣り合うカードの間に20pxの間隔を確保できます。そのうえで、親コンテナ内に残った空間がjustify-contentの指定に従って割り当てられます。

例えばspace-betweenにgap: 20px;を指定した場合、カード間には最低20pxの間隔が確保され、残りの空間が均等に追加されます。 space-aroundやspace-evenlyでも同様に、gapで確保した間隔に加えて余白が割り当てられます。 3種類の余白の違いを比較したい場合は、掲載しているコードのようにgap: 0;を使用してください。

親コンテナと子カードのサイズを変更する方法
親コンテナにはwidth: 100%;とheight: 300px;を指定しています。横幅は配置先の幅に合わせて広がり、横幅が変わるとカード間や左右両端に割り当てられる余白も変化します。高さは300pxに固定していますが、今回のカードは上側に配置されるため、高さを変更しても左右方向の間隔には影響しません。また、子カードの大きさは共通クラスflexbox-row-spacing_cardで指定しています。

/* 子カード共通 */
.flexbox-row-spacing_card {
  width: 60px; /* カードの横幅 */
  height: 50px; /* カードの高さ */
  flex-shrink: 0; /* カードの縮小を防ぐ */
}

カードを大きくしたい場合は、width: 60px;とheight: 50px;の数値を変更してください。横幅を大きくすると、親コンテナ内で余白として使用できる空間が減るため、カード間や左右両端の間隔が狭くなります。反対に横幅を小さくすると、余白として使用できる空間が増えます。
flex-shrink: 0;は、親コンテナの幅が狭くなってもカードが自動的に縮小されないようにする指定です。親コンテナの枠線はborder: 1px solid #cbd5e1;で設定しており、太さや色を変更できます。

カードの背景色を変更する方法
3枚のカードには:nth-child()を使用して、それぞれ異なる背景色を指定しています。 1枚目が青、2枚目がピンク、3枚目が緑です。好きな色に変更したい場合は、各カードのbackgroundを変更してください。

/* 1枚目：パステルブルー */
.flexbox-row-spacing_card:nth-child(1) {
  background: #93c5fd; /* 背景色 */
}

/* 2枚目：パステルピンク */
.flexbox-row-spacing_card:nth-child(2) {
  background: #f9a8d4; /* 背景色 */
}

/* 3枚目：パステルグリーン */
.flexbox-row-spacing_card:nth-child(3) {
  background: #86efac; /* 背景色 */
}

レスポンシブ対応について
親コンテナの横幅は100%なので、パソコンやスマートフォンなど、配置先の横幅に合わせて表示されます。画面幅が狭くなると、カード同士の間隔や左右両端の余白も小さくなりますが、3枚のカードは横並びのまま表示されます。
ただし、子カードにはflex-shrink: 0;を指定しているため、画面が狭くなってもカードの幅は変わりません。 3枚のカードの合計幅は180pxで、親コンテナの枠線を含めると182pxの幅が必要です。それより狭い領域ではカードがはみ出す可能性があるため、必要に応じて子カードの横幅やgapを調整してください。なお、スマートフォンでも選択したjustify-contentの指定は維持されます。