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

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-row-nine_top-left">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

/* 親コンテナ */
.flexbox-row-nine_top-left {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  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; /* はみ出しを防ぐ */
}

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

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

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

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

② 上中央

<!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-row-nine_top-center">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

/* 親コンテナ */
.flexbox-row-nine_top-center {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  justify-content: center; /* 横方向の中央に配置 */
  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-nine_card {
  width: 60px; /* カードの横幅 */
  height: 50px; /* カードの高さ */
  flex-shrink: 0; /* カードの縮小を防ぐ */
}

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

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

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

③ 右上

<!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-row-nine_top-right">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

/* 親コンテナ */
.flexbox-row-nine_top-right {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  justify-content: flex-end; /* 右に配置 */
  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-nine_card {
  width: 60px; /* カードの横幅 */
  height: 50px; /* カードの高さ */
  flex-shrink: 0; /* カードの縮小を防ぐ */
}

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

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

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

④ 左中央

<!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-row-nine_middle-left">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

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

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

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

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

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

⑤ 中央

<!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-row-nine_middle-center">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

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

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

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

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

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

⑥ 右中央

<!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-row-nine_middle-right">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

/* 親コンテナ */
.flexbox-row-nine_middle-right {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  justify-content: flex-end; /* 右に配置 */
  align-items: center; /* 縦方向の中央に配置 */
  gap: 0; /* カード同士の間隔 */
  width: 100%; /* 親コンテナの横幅 */
  height: 300px; /* 親コンテナの高さ */
  border: 1px solid #cbd5e1; /* 外枠 */
  border-radius: 0; /* 角丸なし */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を幅と高さに含める */
  overflow: hidden; /* はみ出しを防ぐ */
}

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

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

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

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

⑦ 左下

<!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-row-nine_bottom-left">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

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

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

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

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

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

⑧ 下中央

<!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-row-nine_bottom-center">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

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

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

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

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

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

⑨ 右下

<!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-row-nine_bottom-right">
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
    <div class="flexbox-row-nine_card"></div>
  </div>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

ファイル構成と設置方法

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

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

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

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

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

/* 親コンテナ */
.flexbox-row-nine_top-left {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* カードを横並びにする */
  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: row;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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