カードを折り返して表示するFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

カードを折り返して表示するFlexboxの使い方

カードを折り返して表示するFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って、複数のカードを横並びにしながら、横幅が足りない場合に次の行へ折り返すレイアウトを作成します。カード数が多い一覧ページや、画面幅に合わせて自然に並びを変えたい場合に便利です。

このサンプルコードでは、カードを配置するエリアに display:flex; と flex-wrap:wrap; を指定します。これにより、カードが横一列に収まりきらない場合でも、はみ出さずに次の行へ回り込みます。画面サイズが変わるレイアウトでも使いやすい基本的な指定です。

折り返し表示は、商品一覧、記事一覧、サービス紹介、機能一覧、ギャラリー風レイアウトなどでよく利用されます。Flexboxでカード一覧を作るうえで重要な使い方なので、横並びや均等配置とあわせて覚えておくと便利です。

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

デモ

カードを折り返して表示するFlexbox

下のカードは flex-wrap:wrap; を指定して、横幅に収まらないカードを次の行へ折り返しています。

display:flex; を指定するとカードを横並びにできます。
flex-wrap:wrap; を指定すると、横幅に収まらないカードが下の行へ折り返されます。
justify-content:center; を指定すると、折り返したカード全体を中央へ配置できます。

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

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

    <!-- タイトル -->
    <h1 class="wrap-flexbox-card-layout_title">
      カードを折り返して表示するFlexbox
    </h1>

    <!-- カードを配置するエリア -->
    <div class="wrap-flexbox-card-layout_area">

      <!-- カード1 -->
      <div class="wrap-flexbox-card-layout_card"></div>

      <!-- カード2 -->
      <div class="wrap-flexbox-card-layout_card"></div>

      <!-- カード3 -->
      <div class="wrap-flexbox-card-layout_card"></div>

      <!-- カード4 -->
      <div class="wrap-flexbox-card-layout_card"></div>

      <!-- カード5 -->
      <div class="wrap-flexbox-card-layout_card"></div>

      <!-- カード6 -->
      <div class="wrap-flexbox-card-layout_card"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに複数のカードを配置し、CSSでFlexboxを使って横幅に収まらないカードを次の行へ折り返します。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カードを折り返して表示するには、カードを囲むエリアに display:flex; を指定し、さらに flex-wrap:wrap; を追加します。折り返したカード全体を中央へ配置したい場合は、justify-content:center; を指定します。

コメント