カードを上揃えにするFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

カードを上揃えにするFlexboxの使い方

カードを上揃えにするFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って、横並びにしたカードの上端をそろえるレイアウトを作成します。カードの高さや文章量が違う場合でも、上の位置をそろえることで見た目が整いやすくなります。

このサンプルコードでは、Flexboxの align-items:flex-start; を使って、カードを上揃えにします。横並びのカードが中央や下にずれて見える場合でも、上端を基準に配置できるため、一覧レイアウトを見やすく整えられます。

カードの上揃えは、記事一覧、商品一覧、プロフィールカード、サービス紹介、比較カードなどで利用できます。カードごとの高さが違っても上の位置を合わせたい場合に便利なFlexboxの使い方です。

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

デモ

カードを上揃えにするFlexbox

高さの違うカードでも、上端が同じ位置に揃っています。

display:flex; を指定すると、カードを横並びにできます。
align-items:flex-start; を指定すると、高さの違うカードでも上端を同じ位置に揃えられます。

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

<!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="top-align-flexbox-card-layout_wrap">

    <!-- タイトル -->
    <h1 class="top-align-flexbox-card-layout_title">
      カードを上揃えにするFlexbox
    </h1>

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

      <!-- 短いカード -->
      <div class="top-align-flexbox-card-layout_card top-align-flexbox-card-layout_card-small"></div>

      <!-- 中くらいのカード -->
      <div class="top-align-flexbox-card-layout_card top-align-flexbox-card-layout_card-medium"></div>

      <!-- 高いカード -->
      <div class="top-align-flexbox-card-layout_card top-align-flexbox-card-layout_card-large"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに高さの違うカードを配置し、CSSでFlexboxを使ってカードの上端を揃えます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カードを上揃えにするには、カード一覧に display:flex; を指定し、さらに align-items:flex-start; を追加します。

コメント