縦並びのカードを9か所に配置するFlexboxの使い方

Flexbox
2026.06.25

Flexboxを使って、縦並びの3枚のカードを親コンテナ内の9か所に配置する方法を紹介します。左上・上中央・右上・左中央・中央・右中央・左下・下中央・右下の配置を、実際のデモで比較できます。

各パターンには完成イメージとHTML・CSSのコードを掲載しています。カードを縦一列に並べたまま、上下左右の位置を調整する方法がわかり、目的に合った配置のコードをコピーして使用できます。

この記事では縦並びの配置を扱います。3枚のカードを横一列に並べたい場合は、横並びのカードを9か所に配置するFlexboxの使い方をご覧ください。

縦並びのカードを9か所に配置するデモとコード

① 左上
<!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>
  <!-- 左上に配置する3枚のカード -->
  <div class="flexbox-column-nine_top-left">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
② 上中央
<!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>
  <!-- 上中央に配置する3枚のカード -->
  <div class="flexbox-column-nine_top-center">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
③ 右上
<!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>
  <!-- 右上に配置する3枚のカード -->
  <div class="flexbox-column-nine_top-right">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
④ 左中央
<!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>
  <!-- 左中央に配置する3枚のカード -->
  <div class="flexbox-column-nine_middle-left">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
⑤ 中央
<!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>
  <!-- 中央に配置する3枚のカード -->
  <div class="flexbox-column-nine_middle-center">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
⑥ 右中央
<!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>
  <!-- 右中央に配置する3枚のカード -->
  <div class="flexbox-column-nine_middle-right">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
⑦ 左下
<!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>
  <!-- 左下に配置する3枚のカード -->
  <div class="flexbox-column-nine_bottom-left">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
⑧ 下中央
<!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>
  <!-- 下中央に配置する3枚のカード -->
  <div class="flexbox-column-nine_bottom-center">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
⑨ 右下
<!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>
  <!-- 右下に配置する3枚のカード -->
  <div class="flexbox-column-nine_bottom-right">
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
    <div class="flexbox-column-nine_card"></div>
  </div>
</body>
</html>
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

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

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

  1. ① InfinityFreeの無料サーバー準備
  2. ② File Managerでアップロード・公開

ファイル構成と設置方法

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

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

各ファイルの役割
index.htmlには、3枚のカードをまとめる親コンテナと、それぞれの子カードを記述しています。 親コンテナのクラス名は配置パターンごとに異なり、例えば左上ではflexbox-column-nine_top-left、中央ではflexbox-column-nine_middle-centerを使用しています。 style.cssには、カードを縦並びにする設定と、9か所のうち選択した位置へ配置するためのCSSを記述しています。

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

縦並びと配置位置を指定する方法
親コンテナにはdisplay: flex;とflex-direction: column;を指定しています。 これにより、3枚のカードが上から下へ縦一列に並びます。 縦並びの場合、justify-contentが上下方向、align-itemsが左右方向の配置を担当します。 次のコードは「① 左上」の配置指定です。 

/* 親コンテナ */
.flexbox-column-nine_top-left {
  display: flex; /* Flexboxを有効にする */
  flex-direction: column; /* カードを縦並びにする */
  justify-content: flex-start; /* 上に配置 */
  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とalign-itemsの値を組み合わせます。 どちらもflex-start・center・flex-endの3種類を使用し、9か所の配置を作っています。 例えば、左上から右下へ変更する場合は、両方の値をflex-endに変更します。 カードのHTMLや縦並びの指定を変更する必要はありません。

9パターンの配置指定
3枚のカードを縦並びにする設定は、すべてのパターンで共通です。 上下の位置はjustify-content、左右の位置はalign-itemsで指定します。 それぞれの値を次のように組み合わせることで、9か所に配置できます。 

/* 9パターン共通 */
flex-direction: column;

/* ① 左上 */
justify-content: flex-start;
align-items: flex-start;

/* ② 上中央 */
justify-content: flex-start;
align-items: center;

/* ③ 右上 */
justify-content: flex-start;
align-items: flex-end;

/* ④ 左中央 */
justify-content: center;
align-items: flex-start;

/* ⑤ 中央 */
justify-content: center;
align-items: center;

/* ⑥ 右中央 */
justify-content: center;
align-items: flex-end;

/* ⑦ 左下 */
justify-content: flex-end;
align-items: flex-start;

/* ⑧ 下中央 */
justify-content: flex-end;
align-items: center;

/* ⑨ 右下 */
justify-content: flex-end;
align-items: flex-end;

カード同士の間隔を変更する方法
gap: 0;は、3枚のカードを隙間なく並べるための指定です。 カード同士に間隔を設けたい場合は、例えばgap: 20px;に変更すると、上下に隣り合うカードの間に20pxの余白ができます。 3枚のカードは1つのまとまりとして配置されるため、間隔を変更しても指定した配置位置は維持されます。

親コンテナと子カードのサイズを変更する方法
親コンテナにはwidth: 100%;とheight: 300px;を指定しています。 横幅は配置先の幅に合わせて広がり、高さを変更するとカードを配置する上下方向の範囲が変わります。 また、子カードの大きさは共通クラスflexbox-column-nine_cardで指定しています。 

/* 子カード共通 */
.flexbox-column-nine_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-column-nine_card:nth-child(1) {
  background: #93c5fd; /* 背景色 */
}

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

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

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

この記事の動作・特徴

レイアウト

上下左右の配置、縦横並び、列数、全画面、固定、折り返しなど、配置や構成を変更する記事。

その他のコードを探す

こちらもおすすめ

Flexbox
Flexboxのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント