カードを左右の端へ配置するFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

カードを左右の端へ配置するFlexboxの使い方

カードを左右の端へ配置するFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って、2枚のカードを左端と右端へ分けて配置するレイアウトを作成します。Flexboxを使うことで、余白を自動で調整しながら、左右に分かれた見やすい配置を簡単に作ることができます。

このサンプルコードでは、カードを配置するエリアにFlexboxを指定し、justify-content:space-between; を使ってカード同士を左右の端へ配置します。左側と右側に情報を分けたい場合や、2つの要素を画面幅いっぱいに広げて見せたい場合に便利です。

左右端のカード配置は、比較カード、料金プラン、前へ・次へボタン、プロフィールと詳細情報、左右に分けた案内パネルなどに活用できます。中央配置や横並びとは違う配置方法を覚えておくことで、Flexboxを使ったレイアウトの幅が広がります。

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

デモ

カードを左右の端へ配置するFlexbox

下の2つのカードは、カード一覧に justify-content:space-between; を指定して左右の端へ配置しています。

display:flex; を指定するとFlexboxが有効になります。
justify-content:space-between; を指定すると、最初のカードが左端、最後のカードが右端へ配置されます。
カード同士の間に余白が入り、左右に分かれたレイアウトになります。

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

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

    <!-- タイトル -->
    <h1 class="edge-flexbox-card-layout_title">
      カードを左右の端へ配置するFlexbox
    </h1>

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

      <!-- 左端に配置されるカード -->
      <div class="edge-flexbox-card-layout_card"></div>

      <!-- 右端に配置されるカード -->
      <div class="edge-flexbox-card-layout_card"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに2枚のカードを配置し、CSSでFlexboxを使ってカードを左右の端へ配置します。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カードを左右の端へ配置するには、カードを囲むエリアに display:flex; を指定し、さらに justify-content:space-between; を追加します。

コメント