文章の長さが違ってもカードの高さを揃えるFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

文章の長さが違ってもカードの高さを揃えるFlexboxの使い方

文章の長さが違ってもカードの高さを揃えるFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って、カードごとに文章量が異なる場合でも、すべてのカードを同じ高さで表示する方法を解説します。カード一覧の見た目を整えたい場合によく使われるレイアウトです。

このサンプルコードでは、Flexboxを利用してカードを横並びにし、高さを自動で揃えます。文章が1行しかないカードと、複数行あるカードが混在していても、高さが統一されるため、一覧全体をきれいに表示できます。

高さを揃えたカードレイアウトは、商品一覧、記事一覧、サービス紹介、料金プラン、プロフィール一覧などでよく利用されます。文章量が異なっても統一感のあるカード一覧を作りたい場合に便利なFlexboxの使い方です。

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

デモ

文章の長さが違ってもカードの高さを揃えるFlexbox

下のカードは文章の長さが違いますが、Flexboxによって同じ高さで表示されています。

カード1

短い文章です。

カード2

こちらのカードには少し長めの文章を入れています。文章量が増えても、他のカードと高さが揃うように表示されます。

カード3

文章量がさらに多いカードです。説明文が複数行になっても、横並びのカード全体が同じ高さになります。商品説明やサービス紹介など、文章量が違うカード一覧で使いやすいレイアウトです。

display:flex; を指定すると、文章量が異なるカードでも高さが揃います。
そのため、商品一覧やサービス一覧などでも、見た目が整ったカードレイアウトを作成できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>文章の長さが違ってもカードの高さを揃えるFlexboxの使い方</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 全体エリア -->
  <div class="equal-height-flexbox-card-layout_wrap">

    <!-- タイトル -->
    <h1 class="equal-height-flexbox-card-layout_title">
      文章の長さが違ってもカードの高さを揃えるFlexbox
    </h1>

    <!-- カード一覧 -->
    <div class="equal-height-flexbox-card-layout_list">

      <!-- 短い文章のカード -->
      <div class="equal-height-flexbox-card-layout_card">
        <div class="equal-height-flexbox-card-layout_card-title">
          カード1
        </div>
        <p class="equal-height-flexbox-card-layout_card-text">
          短い文章です。
        </p>
      </div>

      <!-- 少し長い文章のカード -->
      <div class="equal-height-flexbox-card-layout_card">
        <div class="equal-height-flexbox-card-layout_card-title">
          カード2
        </div>
        <p class="equal-height-flexbox-card-layout_card-text">
          こちらのカードには少し長めの文章を入れています。文章量が増えても、他のカードと高さが揃うように表示されます。
        </p>
      </div>

      <!-- 長い文章のカード -->
      <div class="equal-height-flexbox-card-layout_card">
        <div class="equal-height-flexbox-card-layout_card-title">
          カード3
        </div>
        <p class="equal-height-flexbox-card-layout_card-text">
          文章量がさらに多いカードです。説明文が複数行になっても、横並びのカード全体が同じ高さになります。商品説明やサービス紹介など、文章量が違うカード一覧で使いやすいレイアウトです。
        </p>
      </div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに文章量の異なるカードを配置し、CSSでFlexboxを使ってすべてのカードを同じ高さで表示します。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カード一覧に display:flex; を指定すると、文章量が異なるカードでも高さを揃えて表示できます。横並びのカード一覧をきれいに見せたい場合に便利です。

コメント