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

Flexbox

カードを右寄せにするFlexboxの使い方

カードを右寄せにするFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って、複数のカードをコンテナの右側へまとめて配置する方法を解説します。カード一覧やボタン一覧などで利用される基本的なレイアウトです。

このサンプルコードでは、Flexboxの justify-content:flex-end; を使用してカードを右寄せにします。カード同士の間隔は維持したまま、全体を右側へ揃えられるため、シンプルに右寄せレイアウトを作成できます。

カードの右寄せは、メニュー、ボタン一覧、カード一覧、管理画面などでよく利用されます。Flexboxの横方向の配置方法を学びたい方にもおすすめです。

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

デモ

カードを右寄せにするFlexbox

下の2枚のカードは、Flexboxを使って右側へ寄せて配置しています。

display:flex; を指定するとカードを横並びにできます。
justify-content:flex-end; を指定すると、カード全体を右側へ寄せて表示できます。

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

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

    <!-- タイトル -->
    <h1 class="right-align-flexbox-card-layout_title">
      カードを右寄せにするFlexbox
    </h1>

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

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

      <!-- カード2 -->
      <div class="right-align-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:flex-end; を追加します。

コメント