最も文章量が多いカードに高さを自動で揃えるFlexboxの使い方

ファイル構成と設置方法

今回のサンプルは、HTMLとCSSの2つのファイルで構成されています。HTMLでは文章量の異なる3枚のカードを配置し、CSSではFlexboxを使ってカードを横並びにしています。カードの高さは内容量に合わせて自動的に揃い、画面幅が640px以下になると縦並びに切り替わります。JavaScriptは使用していません。

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

各ファイルの役割
index.htmlには、カード全体を囲む.equal-height-flexbox-card_containerと、3枚の.equal-height-flexbox-card_cardを記述しています。各カードにはタイトルと本文があり、それぞれ異なる長さの文章を設定しています。style.cssでは、カードの横並び・高さの統一・間隔・背景色・文字サイズと、スマートフォン向けの表示設定を行っています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.htmlとstyle.cssを同じ階層に配置し、index.htmlをブラウザで開くと、文章量の異なる3枚のカードが横並びで表示されます。
カード1は短い文章、カード2は少し長い文章、カード3は複数行の文章ですが、3枚とも同じ高さになります。画面幅が640px以下になるとカードが縦並びに切り替わり、それぞれの文章量に応じた高さで表示されます。

Flexboxでカードの高さを自動的に揃える仕組み
style.cssの.equal-height-flexbox-card_containerでは、display: flex;でFlexboxを有効にし、align-items: stretch;で横並びのカードの高さを揃えています。
カードごとに固定の高さを指定する必要はありません。文章量が最も多いカードの高さに合わせて、同じ行のほかのカードも自動的に引き伸ばされます。

/* =========================================
  カード全体
========================================= */

.equal-height-flexbox-card_container {
  display: flex; /* カードを横並びにする */
  align-items: stretch; /* 同じ行のカードの高さを揃える */
  gap: 16px; /* カード同士の間隔。大きくすると間隔が広がる */
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 700px; /* 最大横幅。大きくするとカード全体が横に広がる */
  margin: 0 auto 32px; /* 上0・左右自動・下32pxの余白 */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
}

display: flex;を指定すると、子要素のカードが横方向に並びます。align-items: stretch;は、Flexboxの交差軸方向に子要素を引き伸ばす指定です。今回のように横並びの場合は縦方向に働くため、カードの高さが揃います。
なお、align-items: stretch;はFlexboxの初期値でもあるため、今回のレイアウトでは省略しても同じ結果になります。掲載しているコードでは、高さを揃える指定が分かるように明示しています。

カードの高さを固定せずに揃える方法
今回の.equal-height-flexbox-card_cardには、heightを指定していません。そのため、カード内の文章量が増えると必要な高さが自動的に確保され、横並びのほかのカードも同じ高さになります。

/* =========================================
  各カード
========================================= */

.equal-height-flexbox-card_card {
  flex: 1; /* 3枚のカードの横幅を均等にする */
  min-width: 0; /* カードが親要素の横幅に合わせて縮小できるようにする */
  padding: 20px; /* 内側の余白。大きくすると文章と枠線の間隔が広がる */
  border: 1px solid #cbd5e1; /* 枠線。1pxを大きくすると線が太くなる */
  border-radius: 10px; /* 角丸。大きくすると丸みが強くなる */
  background: #f8fafc; /* カードの背景色 */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
}

flex: 1;は、3枚のカードが利用できる横幅を均等に分けるための指定です。min-width: 0;は、長い文章などが入った場合にもカードが必要に応じて縮小できるようにしています。
heightを固定すると、文章量が増えたときに内容が収まらなくなる場合があります。文章の長さに合わせて高さを自動調整したい場合は、今回のようにカードの高さを固定しない方法が適しています。

カードの文章を変更する方法
各カードのタイトルと本文は、index.htmlに記述しています。タイトルは.equal-height-flexbox-card_title、本文は.equal-height-flexbox-card_textの内容を書き換えてください。
例えば、カード1の文章を長くしたい場合は、次の部分を変更します。

<!-- 1枚目：短い文章のカード -->
<div class="equal-height-flexbox-card_card">
  <div class="equal-height-flexbox-card_title">カード1</div>
  <p class="equal-height-flexbox-card_text">
    短い文章です。
  </p>
</div>

短い文章です。の部分を長い文章へ変更すると、その内容に応じてカードの高さが変わります。カード1が最も高くなった場合は、カード2とカード3もカード1と同じ高さになります。
文章の長さが変わるたびにCSSの高さを調整する必要はありません。

カードの枚数を増減する方法
カードを増やす場合は、index.htmlの.equal-height-flexbox-card_container内に、.equal-height-flexbox-card_cardを追加します。
例えば、4枚目のカードを追加する場合は、次のHTMLを既存の3枚目の後ろに記述してください。

<!-- 4枚目のカードを追加 -->
<div class="equal-height-flexbox-card_card">
  <div class="equal-height-flexbox-card_title">カード4</div>
  <p class="equal-height-flexbox-card_text">
    追加したカードの文章です。
  </p>
</div>

今回のCSSではflex: 1;を使用しているため、カードを4枚に増やすと4枚が横幅を均等に分けて表示されます。カードを減らした場合も、残ったカードの横幅が自動的に調整されます。
ただし、カードを増やすほど1枚あたりの横幅が狭くなります。枚数が多い場合は、カードの折り返しや列数の指定など、別のレイアウト調整が必要です。

カードの間隔と全体の横幅を変更する方法
カード同士の間隔は、.equal-height-flexbox-card_containerのgap: 16px;で指定しています。24pxにすると間隔が広がり、8pxにすると狭くなります。
max-width: 700px;は、カード全体の最大横幅です。900pxにすると横に広がり、500pxにするとコンパクトになります。
margin: 0 auto 32px;は、左右中央揃えと下方向の余白を指定しています。下の余白をなくしたい場合はmargin: 0 auto;に変更してください。

カードの背景色・枠線・角丸を変更する方法
カードのデザインは、.equal-height-flexbox-card_cardで設定しています。background: #f8fafc;を変更すると背景色、border: 1px solid #cbd5e1;を変更すると枠線の太さや色を調整できます。
border-radius: 10px;はカードの角丸です。0にすると角が四角くなり、20pxにすると丸みが強くなります。
padding: 20px;はカード内側の余白です。30pxにすると文章と枠線の間隔が広がり、12pxにすると狭くなります。

タイトルと本文の文字を調整する方法
カードタイトルは.equal-height-flexbox-card_title、本文は.equal-height-flexbox-card_textで設定しています。

/* =========================================
  カードタイトル
========================================= */

.equal-height-flexbox-card_title {
  margin: 0 0 12px; /* 上左右0・下12pxの余白 */
  color: #1e293b; /* タイトルの文字色 */
  font-size: 18px; /* タイトルの文字サイズ */
  font-weight: 700; /* タイトルの文字の太さ */
}

/* =========================================
  カード本文
========================================= */

.equal-height-flexbox-card_text {
  margin: 0; /* ブラウザ標準の余白をなくす */
  color: #475569; /* 本文の文字色 */
  font-size: 14px; /* 本文の文字サイズ */
  line-height: 1.8; /* 行の高さ。大きくすると行間が広がる */
}

font-size: 18px;はタイトルの文字サイズです。22pxにすると大きく、16pxにすると小さくなります。
本文のfont-size: 14px;も同様に変更できます。line-height: 1.8;は行の高さを指定しており、数値を大きくすると行間が広がります。
文字サイズや行間を変更すると文章の折り返し位置が変わり、カードの高さも自動的に調整されます。

レスポンシブ対応
style.cssでは、@media (max-width: 640px)を使用し、画面幅が640px以下になった場合にカードを縦並びへ変更しています。
横並びではalign-items: stretch;が高さを揃える方向に働きますが、縦並びでは横方向に働きます。そのため、スマートフォンではカードの横幅が揃い、高さはそれぞれの文章量に応じて変わります。

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下ではカードを縦並びにする */
  .equal-height-flexbox-card_container {
    flex-direction: column; /* 横並びから縦並びに変更する */
    gap: 16px; /* カード同士の間隔 */
  }

  /* スマートフォンではカードの内側余白を小さくする */
  .equal-height-flexbox-card_card {
    padding: 16px; /* 内側の余白 */
  }

}

flex-direction: column;によって、カードは上から下へ1枚ずつ並びます。align-items: stretch;は引き続き有効ですが、縦並びではカードを横方向に引き伸ばすため、各カードの高さを統一する指定にはなりません。
640pxの数値を768pxに変更すると、画面幅768px以下で縦並びになります。カードの内側余白は20pxから16pxに変更しており、狭い画面でも文章を読みやすくしています。